首页 > Asp.net开发, Js开发 > 使用Ajax以及Jquery.form异步上传图片

使用Ajax以及Jquery.form异步上传图片

一、前言

之前做图片上传一直用的第三方插件,Uploadify  这个应该是用的比较多的,同样也用过别的,在方便了自己的同时也很赞叹人家的功能。思来想去,只会用别的人东西,始终自己学到的少,还是自己做个尝试一下吧。

二、效果

先来看看效果, 这是做微信接口开发的时候做的,比较简陋,只是要实现功能而已。

(1):这是上传前的。

(2):这是未选择图片。

(3):这是选择好图片后的。

(4):这是上传后的效果,返回图片路径 ,然后显示在页面上,因为用的是ajax方式,所以不会看到页面刷新。

三、实现方式

(1):aspx页面代码

[csharp]
  1. <input id="file_temporaryImage" type="file" name="file_temporaryImage" />  <div id="div_temporaryImage"></div><br />  
  2.     <input id="btn_temporary" type="button" value="上传临时素材" onclick="javascript:TemporaryMedia();" />  


(2):所用到的js方法

[javascript]
  1. /*** 
  2. 2015年4月29日10:26:17 
  3. 小马 
  4. 微信上传素材管理 
  5. **/  
  6.   
  7.   
  8.   
  9.   
  10. /********************上传临时素材  Start*****************************/  
  11. function TemporaryMedia() {  
  12.     //var image0 = $("input[name='file_temporaryImage']").val();  
  13.     //判断上传控件中是否选择了图片  
  14.     var image = $("#file_temporaryImage").val();  
  15.     if ($.trim(image) == "") {  
  16.         alert("请选择图片!");  
  17.         return;  
  18.     }  
  19.     //提交请求处理的url  
  20.     var actionUrl = "ImageUpload.ashx";  
  21.     //开始ajax操作  
  22.     $("#form1").ajaxSubmit({  
  23.         
  24.             type: "POST",//提交类型  
  25.             dataType: "json",//返回结果格式  
  26.             url: actionUrl,//请求地址  
  27.             data: { "action""TemporaryImage" },//请求数据  
  28.             success: function (data) {//请求成功后的函数  
  29.                
  30.                 if (data.status == "warning") {//返回警告  
  31.                     alert(data.msg);  
  32.                 } else if (data.status == "success") {//返回成功  
  33.                     $("#div_temporaryImage").append("<img style='width:300px;height:300px;' src='" + data.msg + "' /><span>临时素材mediaId:" + data.uploadmsg.media_id + "</span>");  
  34.                 }  
  35.   
  36.             },  
  37.             error: function (data) { alert(data.msg); },//请求失败的函数  
  38.             async: true  
  39.        
  40.     });  
  41.       
  42.   
  43. }  
  44. /********************上传临时素材  End*****************************/  


(3):所用到 的一般处理程序代码。

[csharp]
  1. using System;  
  2. using System.IO;  
  3. using System.Text;  
  4. using System.Web;  
  5. using WeiXin_Web.Common;  
  6. using WX_Tools;  
  7. using WX_Tools.Entites;  
  8.   
  9. namespace WeiXin_Web  
  10. {  
  11.     /// <summary>  
  12.     /// ImageUpload 的摘要说明  
  13.     /// </summary>  
  14.     public class ImageUpload : IHttpHandler  
  15.     {  
  16.         
  17.         private HttpContext _httpContext;  
  18.   
  19.          
  20.           
  21.   
  22.         public void ProcessRequest(HttpContext context)  
  23.         {  
  24.   
  25.             _httpContext = context;  
  26.   
  27.           
  28.                       
  29.           //  context.Response.ContentType = "text/plain";  
  30.             //context.Response.Write("Hello World");  
  31.             //获取请求  
  32.             string requestAction=context.Request.Form["action"];  
  33.   
  34.             switch (requestAction)  
  35.             {  
  36.                     //临时图片素材  
  37.                 case "TemporaryImage":  
  38.                     TemporaryMeidaUpload();  
  39.                     break;  
  40.             }  
  41.   
  42.   
  43.         }  
  44.   
  45.         //回复消息状态  
  46.         private enum status  
  47.         {  
  48.             error,  
  49.             success,  
  50.             warning  
  51.         }  
  52.   
  53.   
  54.         /// <summary>  
  55.         /// 上传临时素材  
  56.         /// </summary>  
  57.         private void TemporaryMeidaUpload()  
  58.         {  
  59.             //返回格式:{"status":"error,success,warning","msg":""}  
  60.        
  61.            // string result = "{\"status\":\"{0}\",\"msg\":\"{1}\"}";  
  62.   
  63.           
  64.            
  65.             
  66.             try  
  67.             {  
  68.                 //根据前台html的name获取文件  
  69.                 HttpPostedFile upfile = _httpContext.Request.Files["file_temporaryImage"];  
  70.   
  71.                 if (upfile == null)  
  72.                 {  
  73.                      
  74.                     ResponseWriteEnd(status.warning.ToString(), "没有选择文件");  
  75.                      
  76.                 }  
  77.   
  78.                 //文件原名称  
  79.                 string oldMediaName = upfile.FileName;  
  80.   
  81.                 //文件后辍名称  
  82.                 string oldMediaExtension = Path.GetExtension(oldMediaName);  
  83.   
  84.                 //判断文件格式是否符合要求  
  85.                 if (!oldMediaExtension.ToLower().Equals(".jpg"))  
  86.                 {  
  87.                     
  88.                     ResponseWriteEnd(status.warning.ToString(), "请上传jpg格式的文件!");  
  89.                     return;  
  90.                 }  
  91.   
  92.                 //判断文件大小是否符合要求  
  93.                 if (upfile.ContentLength >= (1024*1024*1))  
  94.                 {  
  95.                 ResponseWriteEnd(status.warning.ToString(), "请上传1M以内的文件!");  
  96.                 return;  
  97.                 }  
  98.   
  99.                 string imgName = DateTime.Now.ToString("yyyy-MM-dd-HH-ss") + DateTime.Now.Ticks;  
  100.                 bool flag = false;  
  101.   
  102.                 try  
  103.                 {  
  104.                     upfile.SaveAs(_httpContext.Server.MapPath("/Upload/" + imgName + ".jpg"));  
  105.                     flag = true;  
  106.                 }  
  107.                 catch (Exception e)  
  108.                 {  
  109.   
  110.                       
  111.                   //写入日志  
  112.                     
  113.                 }  
  114.   
  115.                 if (flag)  
  116.                 {  
  117.                     //返回json  
  118.                      
  119.   
  120.                     ResponseWriteEnd(status.success.ToString(), "/Upload/" + imgName + ".jpg");  
  121.                    
  122.                 }  
  123.                 else  
  124.                 {  
  125.                     File.Delete(_httpContext.Server.MapPath("/Upload/" + imgName + ".jpg"));  
  126.                       
  127.                     ResponseWriteEnd(status.warning.ToString(), "图片保存出错,已经被删除。");  
  128.                 }  
  129.             }  
  130.             catch (Exception EX_NAME)  
  131.             {  
  132.   
  133.               ResponseWriteEnd(status.error.ToString(),EX_NAME.ToString());  
  134.             }  
  135.         }  
  136.   
  137.   
  138.         /// <summary>  
  139.         /// 输出方法  
  140.         /// </summary>  
  141.         /// <param name="status"></param>  
  142.         /// <param name="msg"></param>  
  143.         private void ResponseWriteEnd(string status,string msg,string uploadMsg="")  
  144.         {  
  145.             StringBuilder stringBuilder=new StringBuilder();  
  146.             stringBuilder.Append("{");  
  147.             stringBuilder.Append("\"status\":");  
  148.             stringBuilder.AppendFormat("\"{0}\",", status);  
  149.             stringBuilder.Append("\"msg\":");  
  150.             stringBuilder.AppendFormat("\"{0}\",", msg);  
  151.             stringBuilder.Append("\"uploadmsg\":");  
  152.             stringBuilder.AppendFormat("{0}", uploadMsg);  
  153.             stringBuilder.Append("}");  
  154.   
  155.             _httpContext.Response.Write(stringBuilder.ToString());  
  156.            // _httpContext.Response.End();此方法会引起  中止线程错误 。  
  157.            _httpContext.ApplicationInstance.CompleteRequest();  
  158.         }  
  159.   
  160.          
  161.         public bool IsReusable  
  162.         {  
  163.             get  
  164.             {  
  165.                 return false;  
  166.             }  
  167.         }  
  168.     }  
  169. }  


(4):要记得引入jquery.form.js这个文件。

四、源码下载

由于这是我做微信接口开发中的代码的一部分,所以这里给出完整的微信接口开发的代码的地址,我托管在了github上,大家可以下载,也可以一起来编写这个项目。

https://github.com/anyangmaxin/WeiXin


本文固定链接: http://www.devba.com/index.php/archives/6229.html | 开发吧

报歉!评论已关闭.