首页 JQuery/JavaScript Jquery 之异步上传图片

Jquery 之异步上传图片

作者:胡同里的砖头 围观群众:888 更新于:2013-12-19

之前做的实例本地都可以,上传到服务器,默认的路径都是服务器的路径,这肯定不行,下面为正确之异地上传

前台:

<%@ 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】
  • 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.
留言评论
站点声明:
1、本站【胡同里的砖头】个人博客,借鉴网上一些博客模板,取其各优点模块自行拼装开发,本博客开发纯属个人爱好。
2、所有笔记提供给广大用户交流使用,可转载,可复制,纯个人开发所遇问题锦集记录使用
Copyright © huzlblog.com All Rights Reserved. 备案号:苏ICP备2021056683号-8