<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>
这里要注意几点:
processData设置为false。因为data值是FormData对象,不需要对数据做处理。
标签添加enctype=”multipart/form-data”属性。
cache设置为false,上传文件不需要缓存。
contentType设置为false,不设置contentType值,因为是由表单构造的FormData对象,且已经声明了属性enctype=”multipart/form-data”,所以这里设置为false。
上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为中声明的是name=”file”。