asp.net中利用jQuery Form插件上传文件

 

 

[html] view plain copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>  
  6.     <script src="Scripts/MyAjaxForm.js" type="text/javascript"></script>  
  7.     <script type="text/javascript">  
  8.   
  9.         $(function () {  
  10.             $("#btn").click(function () {  
  11.                 $("#fm1").ajaxSubmit({  
  12.                     url: "img.ashx",  
  13.                     type: "post",  
  14.                     success: function (data) {  
  15.                         //IE显示图片会默认加上<PRE></PRE>，着必须要把去除掉才能在低版本ie显示  
  16.                         data = data.replace("<PRE>", "").replace("</PRE>", "");  
  17.                         $("#divimg").append("<img src='" + data + "' width='200px' height='200px'/>");  
  18.                         //清空file控件里面的值  
  19.                         var file = $("#btnfile");  
  20.                         file.after(file.clone().val(""));  
  21.                         file.remove();  
  22.                     }  
  23.                 });  
  24.             });  
  25.         })  
  26.     </script>  
  27. </head>  
  28. <body>  
  29.   <form id="fm1" method="post"><!--method="post"不能省略，在ie里面必不可少-->  
  30.     <input type="file" id="btnfile" name="btnfile" value="提交"/>  
  31.     <br />  
  32.     <input type="button" id="btn" value="上传"/>  
  33.   </form>  
  34.   <div id="divimg"></div>  
  35. </body>  
  36. </html>  
[csharp] view plain copy
 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace WebApplication2  
  7. {  
  8.     /// <summary>  
  9.     /// img 的摘要说明  
  10.     /// </summary>  
  11.     public class img : IHttpHandler  
  12.     {  
  13.         public void ProcessRequest(HttpContext context)  
  14.         {  
  15.             context.Response.ContentType = "text/plain";  
  16.             //获取上传的文件的对象  
  17.             HttpPostedFile img = context.Request.Files["btnfile"];  
  18.   
  19.             //获取上传文件的名称  
  20.             string s = img.FileName;  
  21.             //截取获得上传文件的名称(ie上传会把绝对路径也连带上，这里只得到文件的名称)  
  22.             string str = s.Substring(s.LastIndexOf("\\") + 1);  
  23.             //给文件添加随机戳  
  24.             string path = "/Upload/" + Guid.NewGuid() + str;  
  25.             //保存文件  
  26.             img.SaveAs(context.Server.MapPath(path));  
  27.             context.Response.Write(path);  
  28.         }  
  29.   
  30.         public bool IsReusable  
  31.         {  
  32.             get  
  33.             {  
  34.                 return false;  
  35.             }  
  36.         }  
  37.     }  
  38. }  

当然，我们也可以在input[type=file]的cange事件中处理，$("#btnfile").change(.......

posted @ 2018-03-04 21:52  net5x  阅读(74)  评论(0)    收藏  举报