asp.net文件上传之Ajax提交 C#源码

songwenqi

   平时在做图片或者文件上传的时候都是用的asp.net自带上传控件，然后在.cs文件里获取HttpPostedFile对象来进行上传处理，下面是我最近开发项目时通过Ajax提交来上传文件的一个小例子，源码我会放在附件里传上来。
   我们知道，如果不采用任何插件直接提交给一般处理程序是不行的，因为这样没办法获取这个上传文件的对象，所以呢，我这个例子用到了一个插件ajaxfileupload.js，这个插件是别人写好的，我只是在调试的时候适当的改了些js代码，直接拿过来用的，其实很简单。
    HTML代码：

[C#] 纯文本查看 复制代码

<form id="form1" runat="server">
    <div>
    <p>
    选择图片<input id="photoFile" name="photoFile" runat="server" type="file" multiple="multiple"  accept="image/gif, image/jpeg, image/png" /></p>
     <div id="msgTip" class="msgTipSuccess"></div>
        <div class="msgTipError"></div> 
    <br />
      <a href="#" class="btnUpload" id="myupload">立即上传</a>
    </div>
    </form>
  

   首先需要引用js
   

[HTML] 纯文本查看 复制代码

<script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="/Scripts/ajaxfileupload.js" type="text/javascript"></script>

   下面就是初始化：

[JavaScript] 纯文本查看 复制代码

        $("#photoFile").change(check);
        $("#myupload").click(function () {
            $.ajaxFileUpload
            (
                {
                    url: '/HanderUpload.ashx', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'photoFile', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        if (typeof (data.status) != 'undefined') {
                            if (data.status == '0') {
                                $("#msgTip").hide();
                                $(".msgTipError").html(data.msg);
                                $(".msgTipError").show();
                                $("#photoFile").change(check);
                            } else if (data.status == '1') {
                                $("#msgTip").show();
                                $("#msgTip").html(data.msg + "5s后自动跳转到默认页");
                                $(".msgTipError").hide();
                                setTimeout(function () {
                                    window.location = "Upload.aspx";
                                }, 5000);
                            }
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )

        });
        function check() {
            $(".msgTipError").hide();
            var path = $(this).val();
            $("#msgTip").html("您选择了：" + path);
            $("#msgTip").show();
        }
    

    然后提交的这个HanderUpload.ashx页面就可以直接使用 HttpPostedFile file = context.Request.Files["photoFile"]来获取对象，对对象进行自己的各种操作和处理了。
  下面是效果图：

源码下载  只有年费会员可以直接下载 AjaxFileUpload.rar (62.83 KB, 下载次数: 47)

2015-3-6 13:24 上传

点击文件名下载附件
阅读权限: 90