Ajaxfileupload图片上传（支持PC端、微信、手机浏览器）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LYTIT/article/details/68495586

在使用H5做移动端的上传文件的时候，为了快速实现图片和文件上传，学习Ajaxfileupload.js上传，觉得该js异步上传很不错，不仅能在PC端通过浏览器调用文件框选择需要上传的文件还能在微信和手机端的浏览器直接调用文件管理器，来选择文件进行上传操作；
最主要是它实现很简单，易于学习和操作；

首先使用HTML页面标签

 <input type="file" id="fileDocuments" name="fileDocuments" onchange="uploadPic(this)" accept="image/*;capture=camcorder" />

第一步引用JS文件

<script src="/Scripts/ajaxfileupload.js"></script>
<script src="jquery-1.7.1.js" type="text/javascript">

前端JS调用如下：

</script>
  <script type="text/javascript">
 //上传图片
        var uploadPic = function (handle) {
            var id = handle.id;
            $.ajaxFileUpload({
                url: '/UserCenter/controls/Userdo.ashx',//调用后台方法
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: id,
                dataType: 'json',
                data: { type: 'upload' },
                success: function (data, status) {
                    if (data.status == "success") {
                        //方法一：直接返回路径绑定到src
                        //var tid = "#" + id.replace("file", "");
                        //$(tid).val(data.msg);
                        //$("#fileImg").attr("src", data.msg);
                         //方法二：采用模板绑定上传后的预览位置
                        var str = '<li><div class="divCertificate"><em onclick="deleteCertificate(this)">×</em><img src="' + data.msg + '" alt="" /></div></li>';
                        $("#loadedImg").append(str);
                        //提示信息
                        $.notify({ message: "图片上传成功!" });
                         //限制上传个数
                        //var certificatesImgs = $(".divCertificate");
                        //if (certificatesImgs.length == 4) {
                        //    $("#onaddbtn").hide();
                        //    $("#onloadImg").hide();
                        //}
                    } else {
                        $.notify({ message: data.msg });
                    }
                },
                error: function (data, status, e) {//服务器响应失败处理函数
                    $.notify({ message: "上传出错请重试!" + data });
                }
            });
        };
 </script>

后端采用C#代码实现：

   #region 文件上传
                    var files = context.Request.Files;
                    if (files.Count == 0)
                        ret = "{\"status\":\"0\",\"msg\":\"" + ret + "\"}";
                    else
                    {
                        try
                        {
                            //保存图片路径
                            var path = context.Server.MapPath("/Uploadfile/");
                            if (!Directory.Exists(path))
                                Directory.CreateDirectory(path);
                            HttpPostedFile file = files[0];
                            if (file.ContentLength > 0)
                            {
                                var getExt = Path.GetExtension(file.FileName);
                                //修改图片名称
                                var fileName = Guid.NewGuid().ToString().Replace("-", "") + getExt;
                                var filePath = path + fileName;
                                //保存图片
                                file.SaveAs(filePath);
                                var host = context.Request.Url.Host;
                                 //返回图片路径
                                ret = SiteConfigManager.GetConfigStringByKey("weixinH5Domain") + "/Uploadfile/" + fileName;
                                ret = "{\"status\":\"success\",\"msg\":\"" + ret + "\"}";
                            }
                            else
                                ret = "{\"status\":\"0\",\"msg\":\"上传图片不能为空\"}";

                        }
                        catch
                        {
                            ret = "{\"status\":\"0\",\"msg\":\"" + ret + "\"}";
                        }
                    }
                #endregion