ajaxfileupload 上传使用demo

1.添加js引用

<script src="JS/jquery-1.4.2.min.js" type="text/javascript"></script>

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

2.html页面代码

 <fieldset>
         <legend><strong>项目申报附件</strong></legend>
         <div style="width: 100%;">
             <a style="margin-left: 78%" href="../../ToSaveExcel/Help/预算编制项目相关上报范本文档.zip" target="_blank">点击查看上报范本</a>
            <%-- <a  href="../../ToSaveExcel/Yrzxsl/Silverlight.rar" target="_blank">点击下载添加附件安装程序</a>--%>
            <img  alt="新增附件" onclick="addfiletable()" style="cursor:pointer"  src="../../Images/ImgButton/xzfj.gif"/>
             </div>

         <table cellpadding="5" cellspacing="0" width="100%" style="border-collapse: collapse;
             margin-top: 6px;" id="Bz_file_talbe" class="shenpi">
             <thead>
                 <tr>
                     <th style="width: 50px;">
                         序号
                     </th>
                     <th>
                         附件名称
                     </th>
                     <th style="width: 300px;">
                         文件
                     </th>
                     <th style="width: 200px;">
                         备注
                     </th>
                     <th style="width: 100px;">
                         操作
                     </th>
                 </tr>
             </thead>
             <tbody>
             </tbody>
         </table>
         <input type="hidden" id="hideFileNames"/>
     </fieldset>

3.js代码

 function addfiletable() {
             var length = $("#Bz_file_talbe tbody tr").length;
             var id = parseInt(parseInt(length) + 1);
             var html = ' <tr>' +
             '<td style="width:40px;"><input type="hidden" value="' + id + '" />' + id + '</td>' +
             '<td> <input type="text" name="file_name" style="width: 90%;" /></td>' +
             '<td style="width:300px;">' + getuploadhtml(id) + '</td>' +
             '<td style="width:200px;"><input type="text" id="file_remark" style="width: 150px;" /></td>' +
             '<td><a href="javascript:void(0)" onclick="SaveFiled(this)">[保存]</a>&nbsp;<a href="javascript:void(0)" onclick="delbudgetfile(this)">[删除]</a></td>' +
             '</tr>';
             $("#Bz_file_talbe tbody").append(html);

         }

 function SaveFiled(obj) {
             var tr = $(obj).parent().parent();
             var id = tr.find("td:eq(0) input").val();
             var filename = tr.find("td:eq(1) input").val();
             var filepath = $("#hideFileNames").val();
             var remark = tr.find("td:eq(3) input").val();
             if (filename == "") {
                 AlertMsg('附件名称不能为空！');
                 return;

             }
             if (filepath == "") {
                 AlertMsg('附件上传异常，请重新上传！');
                 return;
             }
             tr.find("td:eq(1)").empty().html('<span>' + filename + '</span>');
             tr.find("td:eq(2)").empty().html('<input type="hidden" id="tab_hdfilename" value="' + filepath + '" />' + getorginfilename(filepath));
             tr.find("td:eq(3)").empty().html('<span>' + remark + '</span>');
             tr.find("td:eq(4)").empty().html('<a href="javascript:void(0)" onclick="downbudgetfile(this)">[下载]</a>&nbsp;<a href="javascript:void(0)" onclick="delbudgetfile(this)">[删除]</a>');

         }

 function delbudgetfile(obj) {
             var tr = $(obj).parent().parent();
             var id = tr.find("td:eq(0) input").val();
             tr.remove();

         }
         function getuploadhtml(id) {
             return '<div style="margin-left:20px;">' +
             '<div style="position:relative;width:270px;height:30px;background:#fff;border:1px solid #eee;">' +
             '<input type="text"  style="position:absolute;left:0;top:0;width:80%;height:100%;z-index:1; border:none; background:#fff;"  id= "importPicName'+id+'" /> <img src="../../Images/attach.png" style="float:right; height:30px; width:30px;" />' +
             '<input type ="file" id="ImportPicInput'+id+'" name= "myfile"  onchange="f_onchangeinput(this)"  style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:999;opacity:0;-ms-filter: \'alpha(opacity=0)";\' />  '+
             '</div> '+
             '</div>';
         }
         function downbudgetfile(obj) {
             var tr = $(obj).parent().parent();
             var path = tr.find("td:eq(2) input").val();
             $.ajax({
                 url: "../HandlerFiles/downFiles.ashx?type=IsExistsFile&fn=" + encodeURI(path) + "&t=" + new Date().getTime(),
                 async: false,
                 success: function(data) {
                     if (data == "1") {
                         $("#isexistsfile").val("1");
                     }
                     else {
                         $("#isexistsfile").val("0");
                         AlertMsg('服务器上该文件已被删除或不存在！');
                     }
                 }
             });
             if ($("#isexistsfile").val() == "1") {
                 $("#comdownshow").attr("src", "../HandlerFiles/downFiles.ashx?type=DownFile&fn=" + encodeURI(path)) + "&t=" + new Date().getTime();
             }
         }
          function getorginfilename(strfile) {
         var filename = "";
         if (strfile != "") {
             filename = strfile.substr(strfile.indexOf(',') + 1).replace(';', '');
         }
         return filename;
     }

上传代码：

 function f_onchangeinput(obj) {
             var id = $(obj).attr("id").replace("ImportPicInput", "");
             $("#importPicName" + id).val($(obj).val());
             $.ajaxFileUpload({
                 type: "POST",
                 url: "/Common2/HandlerFiles/downFiles.ashx?type=UpLoad",
                 data: { "nmae": "sulin" }, //要传到后台的参数，没有可以不写
                 secureuri: false, //是否启用安全提交，默认为false
                 fileElementId: $(obj).attr("id"), //文件选择框的id属性  

                 dataType: 'json', //服务器返回的格式
                 async: false,
                 success: function(data) {
                     if (data.status == '1') {
                         document.getElementById("hideFileNames").value = data.msg;
                     } else {

                         document.getElementById("hideFileNames").value = "";

                     }
                 },
                 error: function(data, status, e) {

                 }
             });
         }

4.后端代码

    public void UpLoad(HttpContext context)
         {
             HttpPostedFile file = context.Request.Files["myfile"];
             string name = context.Request["nmae"].ToString();
             string uploadPath =
                HttpContext.Current.Server.MapPath("~/upload/");//uploadfile/
             //这里可以加验证
             if (file != null && file.ContentLength > )
             {
                 if (!Directory.Exists(uploadPath))
                 {
                     Directory.CreateDirectory(uploadPath);
                 }
                 //var c = IsAllowedExtension(file);
                 //验证后缀名称
                 if (IsAllowExtension(file))
                 {
                     //上传文件类型
                     string ContentType = file.ContentType;
                     int a = file.FileName.LastIndexOf("\\") + ;
                     int b = file.FileName.LastIndexOf(".");
                     string fileName = file.FileName.Substring(a, b - a );
                     string suffix = file.FileName.Substring(file.FileName.LastIndexOf(".") + );//上传文件后缀名
                     //上传文件大小
                     int filesize = file.ContentLength;
                     //生成上传文件名称
                     //string FileName = fileName.Replace(suffix, "") + "_" + DateTime.Now.ToString("yyyyMMddHHmmssfff");
                     string FileName = Guid.NewGuid().ToString() + "," + fileName.Replace(suffix, "");
                     string newFileName = FileName + "." + suffix;
                     file.SaveAs(uploadPath + newFileName);
                     string json = JsonConvert.SerializeObject(new { status = , msg = newFileName });
                     context.Response.Write(json);
                 }
                 else
                 {
                     string json = JsonConvert.SerializeObject(new { status = , msg = "上传文件类型不允许" });
                     context.Response.Write(json);
                 }
             }
             else
             {
                 string json = JsonConvert.SerializeObject(new { status = , msg = "NO" });
                 context.Response.Write(json);
             }
         }

         /// <summary>
         /// 验证后缀名
         /// </summary>
         /// <returns></returns>
         public bool IsAllowExtension(HttpPostedFile filename)
         {
             if (filename != null)
             {
                 string suffix = filename.FileName.Substring(filename.FileName.LastIndexOf("."));
                 List<string> listextension = new List<string> {
             ".xls",".xlsx",".doc",".docx",".pdf",".jpg",".gif","",".bmp",".png"
             };
                 if (listextension.Contains(suffix.ToLower())) return true;
             }
             return false;

         }
         public static bool IsAllowedExtension(HttpPostedFile file)
         {
             BinaryReader reader = new BinaryReader(file.InputStream);

             Dictionary<string, string> diclist = new Dictionary<string, string> { 

             {"","doc|xls|ppt|wps"},
             {"","docx|pptx|xlsx|zip"},
             {"","txt"},
             {"","rar"},
             {"","exe"},
             {"","pdf"},
             {"","htm|html"},
             {"","jpg"},
             {"","gif"},
             {"","png"},
             {"","bmp"},
             {"","bat"}
             };
             string fileclass = "";
             try
             {
                 for (int i = ; i < ; i++)
                 {
                     fileclass += reader.ReadByte().ToString();
                 }
             }
             catch (Exception)
             {
                 throw;
             }
             if (diclist.ContainsKey(fileclass))
             {
                 return true;
             }
             else
             {
                 return false;
             }
         }

5.效果图

ajaxfileupload下载地址