html5 完整圖片上傳

    <div class="photo" style="display:none;" id="upPhoto"><div class="pop-cover"></div><div style="position: absolute; top:30%; left:5%; width:90%; margin:0 auto; z-index:99;">
<a href="#" class="potos tbtm" ><input type="file" name="file" id="file1"  style="display:block; width:100%; text-align:center; opacity: 0;  cursor:pointer;"/><span style=" z-index:1; position:relative; top:-8px; ">本地上傳</span></a><a href="#" class="cancel">取消</a></div></div>  
    </div>
  </section>
   </div>
    </form>
</body>
<script type="text/javascript" src="js/lib/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/lib/ajaxfileupload.js"></script>
<script>

    $(document).ready (function () {

    $("#head").click(function () {
        $(".photo").show();

    });
    $("#file1").on("change", function () {
        change();
    })
    function change(target) {
        $(".photo").hide();
        var allowExtention = ".jpg,.bmp,.png,.jpeg";
       // console.log(target);
        var input = document.getElementById("file1"); //獲取input標籤
        var extention = input.value.substring(input.value.lastIndexOf(".") + 1).toLowerCase(); //截取後綴
        if (extention && allowExtention.indexOf(extention) > -1) {  //判斷上傳圖片類型
            var fileSize = input.files[0].size; //獲取上傳圖片大小
            if (fileSize) {
                if (fileSize <1.5* 1000 * 1024) {  //js限制圖片上傳大小
                    ajaxFileUpload();
                }
                else
                    addSystemTip($page, "上傳圖片過大！");
            }

        }
        else
            addSystemTip($page, "上傳圖片格式不正確！");

    }

 

    // 使用jquery ajaxFileupload插件 原理是把一個form提交到後端來獲取圖片

   //因此 input type=file 標籤必需要給一個 name屬性，是必須的不然後臺沒法獲取圖片
    function ajaxFileUpload() {
        $.ajaxFileUpload({
            url: "MyAccount.aspx?type=img"////用於文件上傳的服務器端請求地址
            , secureuri: false // //是否須要安全協議，通常設置爲false
            , fileElementId: 'file1' //文件上傳域的ID
            , dataType: 'json' //返回值類型 通常設置爲json
          //  , type: 'post'
            , success: function (data, status)  //服務器成功響應處理函數
            {                             
                $("#img").attr("src", data.imgurl);
                //  var input = document.getElementById("file1");
                var span = $("#file1").next();
                $("#file1").remove();   //上傳成功後刪除file標籤，不然沒法繼續上傳          
                var ele = $('<input type="file" name="file"  id="file1" style="display:block; width:100%; text-align:center; opacity: 0;  cursor:pointer;"/>'); //從新建立file標籤
                ele.insertBefore(span);
                ele.on("change", function () { //從新綁定change事件句柄
                    change();
                })            
                $(".photo").hide();
            },
            error: function (data, status, e)//服務器響應失敗處理函數
            {
                $(".photo").hide();
            }
        });        
    }
    $(".cancel").click(function () {

        $(".photo").hide();

    })
    $(".pop-cover").mousemove(function () {

        $(".photo").hide();

    })
})
</script>
</html>

 

//對應後臺代碼，而且將上傳圖片從新繪畫一下 指定像素大小

    public partial class MyAccount : MemberBase
    {
        public MemberDetails user = new MemberDetails();
        
        public string ImageURl = "";
        public string encodeName = "";
        public string sex = "保密";
        string domain = XpVShop.MyFuc.Utils.GetAppSettingValue("turnUrl") + "/Upload/users/";
        string localUrl = XpVShop.MyFuc.Utils.GetAppSettingValue("PCUploadPath2");

       // string domain = "http://localhost:89/Upload/images/";//本地測試使用
       // string localUrl=@"F:\hz\code\aishop\Publish\vshop\Upload\images\";
      
        protected void Page_Load(object sender, EventArgs e)
        {

            if (!IsPostBack)
            {
                XpVShop.MyFuc.LogHelper.Write("MyAccount mid:" + CurrentUser.MemberID);
                user = MemberBLL.GetMemberDetails(CurrentUser.MemberID);
                string u = "vshop_ChangeName.aspx";
                encodeName = XpVShop.MyFuc.Utils.UrlEncode(u);
                if (user.Photo.IndexOf("http://wx.qlogo.cn") == -1)
                    ImageURl = domain + user.Photo;
                else
                    ImageURl = user.Photo;
                if (!string.IsNullOrEmpty(user.Mobile))
                    user.Mobile = user.Mobile.Substring(0, 5) + "***" + user.Mobile.Substring(user.Mobile.Length - 1, 1);
                ;
                if (user.Sex) sex = "男";
                else sex = "女";
                string type = Utils.ReqStrParams("type", "");
                if (type == "img")
                {
                    HttpFileCollection files = Request.Files;
                    string msg = string.Empty;
                    string error = string.Empty;
                    string imgurl;

                    if (files.Count > 0)
                    {
                        string name = System.IO.Path.GetFileName(files[0].FileName);
                        // string url = Server.MapPath("Upload/images/") + CurrentUser.MemberID + name;  

                        XpVShop.MyFuc.LogHelper.Write(" MyAccount 存放路徑 localUrl:" + localUrl);
                        try
                        {
                            string strGuid = System.Guid.NewGuid().ToString().ToUpper(); //始化 Guid 類的新
                            string strFileExt = name.Substring(name.LastIndexOf(".")); //獲得圖片的後綴
                            string path = localUrl + strGuid  + strFileExt;
                            System.Web.HttpPostedFile postedFile = files[0];
                            XpVShop.MyFuc.LogHelper.Write("MyAccount 存放地址以前;" + path);                        
                           // files[0].SaveAs(localUrl + CurrentUser.MemberID + name);
                            XpVShop.MyFuc.Utils.GetThumbNail(name, 350,200, "image/pjpeg", false, postedFile.InputStream, path);
                            imgurl = strGuid + strFileExt;
                            user.Photo = imgurl;                        
                            MemberBLL.UpdateMemberPhoto(user);
                            CurrentUser.Photo = imgurl;
                            ImageURl = domain + user.Photo;
                            XpVShop.MyFuc.LogHelper.Write(" MyAccount 保存圖片路徑" + ImageURl + "保存數據庫字段:user.Photo:" + imgurl + "存放地址 " + path);
                            // msg = " 成功! 文件大小爲:" + files[0].ContentLength;                                              
                            string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + ImageURl + "'}";
                            Response.Write(res);
                            Response.End();
                        }
                        catch (Exception ex)
                        {
                            XpVShop.MyFuc.LogHelper.Write("MyAccount ex:" + ex.ToString());

                        }

                    }
                }
            }

        }     
    }

 

            /// <summary>
           /// 處理上傳圖片爲指定像素
           /// </summary>
           /// <param name="strFileName">文件名</param>
           /// <param name="iWidth"></param>
           /// <param name="iheight"></param>
           /// <param name="strContentType">圖片類型</param>
           /// <param name="blnGetFromFile">是不是從本地文件名獲取文件流</param>
           /// <param name="ImgStream">文件流</param>
           ///  <param name="path">保存路徑</param>
           public static void GetThumbNail(string strFileName, int iWidth, int iheight, string strContentType, bool blnGetFromFile, System.IO.Stream ImgStream, string path)
           {
               System.Drawing.Image oImg;
               if (blnGetFromFile) oImg = System.Drawing.Image.FromFile(strFileName);
               oImg = System.Drawing.Image.FromStream(ImgStream);
               oImg = oImg.GetThumbnailImage(iWidth, iheight, null, IntPtr.Zero);   //GetThumbnailImage方法是返回此Image對象的縮略圖
              // string strGuid = System.Guid.NewGuid().ToString().ToUpper(); //始化 Guid 類的新
              // string strFileExt = strFileName.Substring(strFileName.LastIndexOf("."));  //獲得圖片的後綴
               //MemoryStream MemStream = new MemoryStream(); //建立其支持存儲區爲內存的流     
               oImg.Save(path);             
           }