之前做的实例本地都可以,上传到服务器,默认的路径都是服务器的路径,这肯定不行,下面为正确之异地上传
前台:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <script src="jquery1.4.2.js" type="text/javascript"></script> <script src="ajaxfileupload.js" type="text/javascript"></script> <script type="text/javascript"> function ajaxFileUpload() { $.ajaxFileUpload ( { url: 'UploadImageHandler.ashx?userid=1&name=abc', secureuri: false, fileElementId: 'fileToUpload', dataType: 'html', beforeSend: function() { $("#loading").show(); }, complete: function() { $("#loading").hide(); }, success: function(data, status) { 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> </head> <body> <form id="form1" runat="server"> <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"> <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();"> Upload</button> </form> </body> </html>
ashx文件
<%@ WebHandler Language="C#" Class="UploadImageHandler" %> using System; using System.Web; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.IO; using System.Net; using System.Text; public class UploadImageHandler : IHttpHandler { public void ProcessRequest (HttpContext context) { //获取前台的FILE HttpPostedFile file = context.Request.Files["fileToUpload"]; string path = "UploadImgs\\"; //Bitmap map = new Bitmap(filePath); string fileName = Path.GetFileName(file.FileName); string mapPath = context.Server.MapPath("~"); string savePath = mapPath + "\\" + path + fileName; //map.Save(savePath); file.SaveAs(savePath); //上传成功后显示IMG文件 StringBuilder sb = new StringBuilder(); sb.Append("<img id=\"imgUpload\" src=\""+path.Replace("\\","/")+fileName+"\" />"); context.Response.Write(sb.ToString()); context.Response.End(); } public bool IsReusable { get { return false; } } }
- 本文标题: Jquery 之异步上传图片
- 文章分类:【JQuery/JavaScript】
- 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.