1.下载一个ajaxfileupload.js
2.给上传按钮添加事件
<input type="button" id="btnUpload" value="上传" onclick="ajaxFileUpload()"/>
注:谷歌浏览器dataType中的JSON必须大写
<script type="text/javascript"> function ajaxFileUpload(){ $.ajaxFileUpload({ url:'ajax/UploadImage.ashx', //需要链接到服务器地址 secureuri: false, fileElementId:'houseMaps', //文件选择框的id属性 dataType: 'JSON', //服务器返回的格式,可以是json success: function (data, status) //相当于java中try语句块的用法 { //alert(data); if(data.length > 0){ $("#Photo").val(data); $("#btnUpload").val("已上传"); alert("成功!"); } else{ $("#Photo").val(""); $("#btnUpload").val("上传"); alert("失败!"); } }, error: function (data, status, e) //相当于java中catch语句块的用法 { alert("失败"); //$('#result').html('添加失败'); } }); } </script>
3.后台上传文件处理,并返回文件名称("text/html" 而非text/json,因为json返回额外多的东西)此处只做简单处理,直接返回拿到字符串即可
context.Response.ContentType = "text/html"; HttpFileCollection files = context.Request.Files; string msg = string.Empty; string error = string.Empty; string imgurl; try { if (files.Count > 0) { //files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName)); string filePath = AppDomain.CurrentDomain.BaseDirectory + @"AdminApplyImage"; string filename = files[0].FileName; //检测文件名称 if (filename.ToLower().Contains(".jpg") || filename.ToLower().Contains(".gif") || filename.ToLower().Contains(".bmp")) { //改文件名 int index = filename.LastIndexOf("."); string lastName = filename.Substring(index, filename.Length - index); //新文件名称,以时间年月日时分秒作为文件名 string newfile = DateTime.Now.ToString("yyyyMMddhhmmss") + lastName; files[0].SaveAs(filePath + newfile); //msg = " 成功! 文件大小为:" + files[0].ContentLength; //imgurl = "/" + files[0].FileName; //string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}"; //string res = "{error:'',msg:'成功'}"; context.Response.Write(newfile); context.Response.End(); } else { context.Response.Write(""); context.Response.End(); } } } catch { context.Response.Write(""); context.Response.End(); }