Question

jqueryajax不能上传图片？

Answer 1

不能上传的原因可能是jquery插件使用不正确。

解决方法：

1、在head之间加入jquery引用

 <script type="text/javascript" src="jquery.js"></script>

 <script src="project/js/jquery.form.js" type="text/javascript"></script>

 <script src="project/js/fileload.js" type="text/javascript"></script>

2、定义fileload.js，代码如下：

function createHtml(obj) {
   var htmstr = [];
   htmstr.push(  "<form id='_fileForm' enctype='multipart/form-data'>");
   htmstr.push(  "<table cellspacing=\"0\" cellpadding=\"3\" style=\"margin:0 auto; margin-top:20px;\">");
   htmstr.push(  "<tr>");
   htmstr.push(  "<td class=\"tdt tdl\">请选择文件：</td>");
   htmstr.push(  "<td class=\"tdt tdl\"><input id=\"loadcontrol\" type=\"file\" name=\"filepath\" id=\"filepath\" /></td>");
   htmstr.push(  "<td class=\"tdt tdl tdr\"><input type=\"button\" onclick=\"fileloadon()\" value=\"上传\"/></td>");
   htmstr.push(  "</tr>");
   htmstr.push(  "<tr> <td class=\"tdt tdl tdr\" colspan='3'style='text-align:center;'><div id=\"msg\">&nbsp;</div></td> </tr>");
   htmstr.push(  "<tr> <td class=\"tdt tdl tdr\" style=\" vertical-align:middle;\">图片预览：</td> <td class=\"tdt tdl tdr\" colspan=\"2\"><div style=\"text-align:center;\"><img src=\"project/Images/NoPhoto.jpg\"/></div></td> </tr>");
   htmstr.push(  "</table>")
   htmstr.push(  "</form>");
   obj.html(htmstr.join(""));
}

function fileloadon() {
   $("#msg").html("");    
   $("img").attr({ "src": "project/Images/processing.gif" });
   $("#_fileForm").submit(function () {  
       $("#_fileForm").ajaxSubmit({
           type: "post",
           url: "project/help.aspx",
           success: function (data1) {
           var remsg = data1.split("|");
           var name = remsg[1].split("\/");
           if (remsg[0] == "1") {
           var type = name[4].substring(name[4].indexOf("."), name[4].length);
           $("#msg").html("文件名：" + name[name.length - 1] + "   ---  " + remsg[2]);
           switch (type) {
               case ".jpg":
               case ".jpeg":
               case ".gif":
               case ".bmp":
               case ".png":
               $("img").attr({ "src": remsg[1] });
               break;
           default:
               $("img").attr({ "src": "project/Images/msg_ok.png" });
               break;
           }
           } else {
               $("#msg").html("文件上传失败：" + remsg[2]);
               $("img").attr({ "src": "project/Images/msg_error.png" });
           }
           },
           error: function (msg) {
               alert("文件上传失败");    
           }
       });
       return false;
   });
   $("#_fileForm").submit();
}

3、服务端处理上传。

protected void Page_Load(object sender, EventArgs e)
   {
       try
       {
           HttpPostedFile postFile = Request.Files[0];
           //开始上传
           string _savedFileResult = UpLoadFile(postFile);
           Response.Write(_savedFileResult);

       }
       catch(Exception ex)
       {
           Response.Write("0|error|上传提交出错");
       }

   }
   public string UpLoadFile(HttpPostedFile str)
   {
       return UpLoadFile(str, "/UpLoadFile/");
   }
   public string UpLoadFile(HttpPostedFile httpFile, string toFilePath)
   {
       try
       {
           //获取要保存的文件信息
           string filerealname = httpFile.FileName;
           //获得文件扩展名
           string fileNameExt = System.IO.Path.GetExtension(filerealname);
           if (CheckFileExt(fileNameExt))
           {
               //检查保存的路径 是否有/结尾
               if (toFilePath.EndsWith("/") == false) toFilePath = toFilePath + "/";

               //按日期归类保存
               string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/";
               if (true)
               {
                   toFilePath += datePath;
               }

               //物理完整路径                    
               string toFileFullPath = System.Web.HttpContext.Current.Request.PhysicalApplicationPath + toFilePath;

               //检查是否有该路径  没有就创建
               if (!System.IO.Directory.Exists(toFileFullPath))
               {
                   Directory.CreateDirectory(toFileFullPath);
               }

               //得到服务器文件保存路径
               string toFile = Server.MapPath("~" + toFilePath);
               string f_file = getName(filerealname);
               //将文件保存至服务器
               httpFile.SaveAs(toFile + f_file);
               return "1|" + toFilePath + f_file + "|" + "文件上传成功";
           }
           else
           {
               return "0|errorfile|" + "文件不合法";
           }
       }
       catch (Exception e)
       {
           return "0|errorfile|" + "文件上传失败,错误原因：" + e.Message;
       }
   }

   /// <summary>
   /// 获取文件名
   /// </summary>
   /// <param name="fileNamePath"></param>
   /// <returns></returns>
   private string getName(string fileNamePath)
   {
       string[] name = fileNamePath.Split('\\');
       return name[name.Length - 1];
   }
   /// <summary>
   /// 检查是否为合法的上传文件
   /// </summary>
   /// <param name="_fileExt"></param>
   /// <returns></returns>
   private bool CheckFileExt(string _fileExt)
   {
       string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".rar",".png" };
       for (int i = 0; i < allowExt.Length; i++)
       {
           if (allowExt[i] == _fileExt) { return true; }
       }
       return false;

   }

   public static string GetFileName()
   {
       Random rd = new Random();
       StringBuilder serial = new StringBuilder();
       serial.Append(DateTime.Now.ToString("HHmmss"));
       serial.Append(rd.Next(100, 999).ToString());
       return serial.ToString();
   }

4、运行defualt.aspx页面以后显示的效果是：

5、上传图片则显示对应的图片：

Answer 2

想要异步上传文件和图片可以是用iframe标签，然后将form的target指定为添加的iframe即可。可以搜搜“iframe文件上传”。或者找一些第三方库。