注意点：
作为文件域(<input type="file">)必须要有name属性，如果没有name属性，上传之后服务器是获取不到图片的。如：正确的写法是<input type="file" id="file1" name="file1" />
dataType参数一定要大写。如：dataType: 'HTML'
一.html
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
二.js
<script src="jquery-1.7.1.js" type="text/javascript"></script> <script src="ajaxfileupload.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(":button").click(function () { ajaxFileUpload(); }) }) function ajaxFileUpload() { $.ajaxFileUpload ( { url: '/upload.aspx', //用于文件上传的服务器端请求地址 secureuri: false, //是否需要安全协议，一般设置为false fileElementId: 'file1', //文件上传域的ID dataType: 'json', //返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { $("#img1").attr("src", data.imgurl); if (typeof (data.error) != 'undefined') { if (data.error != '') { alert(data.error); } else { alert(data.msg); } } }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } } ) return false; } </script>
三.后台
protected void Page_Load(object sender, EventArgs e) { HttpFileCollection files = Request.Files; string msg = string.Empty; string error = string.Empty; string imgurl; if (files.Count > 0) { files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName)); msg = " 成功! 文件大小为:" + files[0].ContentLength; imgurl = "/" + files[0].FileName; string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}"; Response.Write(res); Response.End(); } }
四.JS前台页面判断文件内容大小
function change() { $('.imgupload').off("change"); //先关闭一次change $('.imgupload').on("change", "#filePicture", function () { var bool = testMaxSize(this.files[0]); //调用方法 if (bool) { $("#zt").text("移入可预览文件"); var files = window.URL.createObjectURL(this.files[0]); $('.laye_img').attr("src", files); } else { alert("图片大小超过限制，请上传小于1M体积！"); $("#zt").text("选择上传图片"); $('.laye_img').attr("src", ""); } imgfloat()//调用 }) }
//判断图片大小 function testMaxSize(file) { if (file) { var fileData = file; var size = fileData.size; //注意，这里读到的是字节数 maxSize = 1048576; //转化为字节 if (size <= maxSize) { return true; } else { return false; } } }