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);
        
        }

  • 1
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

HI阡陌

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值