jq上傳圖片,兼容ie


1:首先引入腳本jquery.js和 ajaxfileupload.js

2:測試布局:

 <div>
        <form>
            <input type="file" name="file1" id="file1" />
            <input type="text" name="txt" id="txt" />
            <input type="text"  name="pwd" id="pwd"/>
            <input type="button" value="上傳" />
        </form>
        
        <p><img id="img1" alt="" src="" /></p>
    </div>

3:jq代碼:

        $(function () {


           
            $(":button").click(function () {
                var pic = $("#file1").val();
                if (pic.length > 0) {
                    var subStr = pic.substr(pic.lastIndexOf('.') + 1);//截取字符串
               if (subStr == "jpg" || subStr == "png" || subStr == "gif" || subStr == "jpeg  ") {//判斷文件類型
                            upload();
                        } else {
                            alert("請選擇正確的文件類型");
                            return;
                        }
           } else {
                    alert("請選擇圖片");
                    return;
                }
          
            });
        })
        function upload() {
            $.ajaxFileUpload({


                url: '../../Home/Upload',

                data:{txt:txt,pwd:pwd},
                secureuri: false, //一般設置為false
                fileElementId: 'file1', //文件上傳空間的id屬性  <input type="file" id="file" name="file" />
                dataType: 'HTML', //返回值類型 一般設置為json
                success: function (data,status) {
                    alert(data);
                    $("#img1").attr("src", "../../Images/"+data);
                    if (typeof (data.error) != 'undefined') {
                        if (data.error != '') {
                            alert(data.error);
                        } else {
                            alert(data.msg);
                        }
                    }
                }, error: function (error) {
                    alert("錯誤");
                }


            });
        }
    </script>


4:后台代碼:

  public ActionResult Upload() {
            NameValueCollection nv = System.Web.HttpContext.Current.Request.Form;//獲取傳過來的參數data的值
            HttpFileCollection hc = System.Web.HttpContext.Current.Request.Files;//獲取前台控件file
            string txt = nv.Get("txt");//得到值
            string pwd = nv.Get("pwd");

            string imgPath = "";//用於存儲路徑
            string PIC = hc[0].FileName;//圖片名
            string substr = "";//保存截取的字符
            string picsrc = "";//返回的圖片路徑
            if (hc.Count > 0)
            {


                //用ie上傳圖片時會帶出圖片的絕對路徑,我們只需判斷該字符串的是否有盤符路徑,有的話截取路徑
                if (PIC.Contains("C:")||PIC.Contains("D:")||PIC.Contains("E:")||PIC.Contains("F:")||PIC.Contains("G:"))//判斷字符串中是否有盤符路徑
                {
                    substr = PIC.Substring(PIC.LastIndexOf('\\')+1);
                    imgPath = "~/Images/" + substr;
                    picsrc = substr;
                }
                else
                {
                    picsrc = PIC;
                    imgPath = "~/Images/" + PIC;
                }
               
                string mapth = Server.MapPath(imgPath);
                hc[0].SaveAs(mapth);
            }
            return Content(picsrc);
        
        }


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: