码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-06-04 11:49:06      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:ajax   jquery.form   上传   无刷新上传   微信   

一、前言

之前做图片上传一直用的第三方插件,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技术交流群技术分享



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

标签:ajax   jquery.form   上传   无刷新上传   微信   

原文地址:http://blog.csdn.net/itmaxin/article/details/46357291

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!