經過Ajax方式上傳文件(input file),使用FormData進行Ajax請求

<div  >
                        <input type="file" name="FileUpload" id="FileUpload">
                        <a class="layui-btn layui-btn-mini" id="btn_uploadimg">上傳圖片</a>
                    </div>

  

 <script type="text/jscript">

        $(function () {
            $("#btn_uploadimg").click(function () {
                var fileObj = document.getElementById("FileUpload").files[0]; // js 獲取文件對象
                if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
                    alert("請選擇圖片");
                    return;
                }
                var formFile = new FormData();
                formFile.append("action", "UploadVMKImagePath");   
                formFile.append("file", fileObj); //加入文件對象

                //第一種  XMLHttpRequest 對象
                //var xhr = new XMLHttpRequest();
                //xhr.open("post", "/Admin/Ajax/VMKHandler.ashx", true);
                //xhr.onload = function () {
                //    alert("上傳完成!");
                //};
                //xhr.send(formFile);

                //第二種 ajax 提交

                var data = formFile;
                $.ajax({
                    url: "/Admin/Ajax/VMKHandler.ashx",
                    data: data,
                    type: "Post",
                    dataType: "json",
                    cache: false,//上傳文件無需緩存 
                    processData: false,//用於對data參數進行序列化處理 這裏必須false
                    contentType: false, //必須 
                    success: function (result) {
                        alert("上傳完成!");
                    },
                }) 
            }) 
        })

    </script>

  補充 IE8 不支持.files 寫法javascript

相關文章
相關標籤/搜索