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

Posted 2020-06-24 gcczhongduan

一、前言

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

二、效果

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

(1):这是上传前的。

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

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

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

三、实现方式

(1):aspx页面代码

    <input id="file_temporaryImage" type="file" name="file_temporaryImage" />  <div id="div_temporaryImage"></div><br />
        <input id="btn_temporary" type="button" value="上传暂时素材" onclick="javascript:TemporaryMedia();" />

(2):所用到的js方法

/***
2015年4月29日10:26:17
小马
微信上传素材管理
**/




/********************上传暂时素材  Start*****************************/
function TemporaryMedia() {
    //var image0 = $("input[name='file_temporaryImage']").val();
    //推断上传控件中是否选择了图片
    var image = $("#file_temporaryImage").val();
    if ($.trim(image) == "") {
        alert("请选择图片！");
        return;
    }
    //提交请求处理的url
    var actionUrl = "ImageUpload.ashx";
    //開始ajax操作
    $("#form1").ajaxSubmit({
      
            type: "POST",//提交类型
            dataType: "json",//返回结果格式
            url: actionUrl,//请求地址
            data: { "action": "TemporaryImage" },//请求数据
            success: function (data) {//请求成功后的函数
             
                if (data.status == "warning") {//返回警告
                    alert(data.msg);
                } else if (data.status == "success") {//返回成功
                    $("#div_temporaryImage").append("<img style='width:300px;height:300px;' src='" + data.msg + "' /><span>暂时素材mediaId:" + data.uploadmsg.media_id + "</span>");
                }

            },
            error: function (data) { alert(data.msg); },//请求失败的函数
            async: true
     
    });
    

}
/********************上传暂时素材  End*****************************/

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

using System;
using System.IO;
using System.Text;
using System.Web;
using WeiXin_Web.Common;
using WX_Tools;
using WX_Tools.Entites;

namespace WeiXin_Web
{
    /// <summary>
    /// ImageUpload 的摘要说明
    /// </summary>
    public class ImageUpload : IHttpHandler
    {
      
        private HttpContext _httpContext;

       
        

        public void ProcessRequest(HttpContext context)
        {

            _httpContext = context;

        
                    
          //  context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            //获取请求
            string requestAction=context.Request.Form["action"];

            switch (requestAction)
            {
                    //暂时图片素材
                case "TemporaryImage":
                    TemporaryMeidaUpload();
                    break;
            }


        }

        //回复消息状态
        private enum status
        {
            error,
            success,
            warning
        }


        /// <summary>
        /// 上传暂时素材
        /// </summary>
        private void TemporaryMeidaUpload()
        {
            //返回格式：{"status":"error,success,warning","msg":""}
     
           // string result = "{\"status\":\"{0}\",\"msg\":\"{1}\"}";

        
         
          
            try
            {
                //依据前台html的name获取文件
                HttpPostedFile upfile = _httpContext.Request.Files["file_temporaryImage"];

                if (upfile == null)
                {
                   
                    ResponseWriteEnd(status.warning.ToString(), "没有选择文件");
                   
                }

                //文件原名称
                string oldMediaName = upfile.FileName;

                //文件后辍名称
                string oldMediaExtension = Path.GetExtension(oldMediaName);

                //推断文件格式是否符合要求
                if (!oldMediaExtension.ToLower().Equals(".jpg"))
                {
                  
                    ResponseWriteEnd(status.warning.ToString(), "请上传jpg格式的文件！
");
                    return;
                }

                //推断文件大小是否符合要求
                if (upfile.ContentLength >= (1024*1024*1))
                {
                ResponseWriteEnd(status.warning.ToString(), "请上传1M以内的文件！");
                return;
                }

                string imgName = DateTime.Now.ToString("yyyy-MM-dd-HH-ss") + DateTime.Now.Ticks;
                bool flag = false;

                try
                {
                    upfile.SaveAs(_httpContext.Server.MapPath("/Upload/" + imgName + ".jpg"));
                    flag = true;
                }
                catch (Exception e)
                {

                    
                  //写入日志
                  
                }

                if (flag)
                {
                    //返回json
                   

                    ResponseWriteEnd(status.success.ToString(), "/Upload/" + imgName + ".jpg");
                 
                }
                else
                {
                    File.Delete(_httpContext.Server.MapPath("/Upload/" + imgName + ".jpg"));
                    
                    ResponseWriteEnd(status.warning.ToString(), "图片保存出错，已经被删除。
");
                }
            }
            catch (Exception EX_NAME)
            {

              ResponseWriteEnd(status.error.ToString(),EX_NAME.ToString());
            }
        }


        /// <summary>
        /// 输出方法
        /// </summary>
        /// <param name="status"></param>
        /// <param name="msg"></param>
        private void ResponseWriteEnd(string status,string msg,string uploadMsg="")
        {
            StringBuilder stringBuilder=new StringBuilder();
            stringBuilder.Append("{");
            stringBuilder.Append("\"status\":");
            stringBuilder.AppendFormat("\"{0}\",", status);
            stringBuilder.Append("\"msg\":");
            stringBuilder.AppendFormat("\"{0}\",", msg);
            stringBuilder.Append("\"uploadmsg\":");
            stringBuilder.AppendFormat("{0}", uploadMsg);
            stringBuilder.Append("}");

            _httpContext.Response.Write(stringBuilder.ToString());
           // _httpContext.Response.End();此方法会引起  中止线程错误 。

           _httpContext.ApplicationInstance.CompleteRequest();
        }

       
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

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

四、源代码下载

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

https://github.com/anyangmaxin/WeiXin

五、欢迎增加.net技术交流群

欢迎增加.net技术交流群