首页 > 代码库 > 图片上传_及时显示

图片上传_及时显示

   其实到现在我从刚毕业的雄心壮志,已经变为攀爬的小鸟了.虽然在没有任务的情况下贪玩着,不过在接到任务的时,我还是抱着百分之百的心去完成.

    在学校时,拖控件是我最喜欢做的事,因为很简单方便.从来没有考略过性能之类的问题,绝对做出来我就很厉害了.但是现在到了公司完全是老鸟鄙视的对象,虽然公司没有明确规定你不能拖控件,但是可能是虚荣心吧,努力扔掉控件,像js 进发. 我觉得我现在的状态就是,出生的婴儿,见一个学一个.

     今天就总结一个我自己知道的图片上传.

      js:

 1    $(function () { 2             $(#hidIFrame).load(function () { 3                 var retContent = $(#hidIFrame).get(0).contentWindow.document.body.innerText; 4                 if (retContent == 0) { 5                     alert(文件不能上传超过10M); 6                     return false; 7                 } 8                 else { 9 10                     $("#img").attr(src, ../img/ + retContent)11                 }12             });13             $("#fil_img").change(function () {14                 var img = $("#fil_img").val();15                 if (img == "") {16                     alert("请上传图片");17                     return false;18                 }19                 else {20                     if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(img)) {21                         alert("图片类型必须是.gif,jpeg,jpg,png中的一种")22                         return false;23                     }24                 }25                 $("#form1").submit();26 27             });28         });

  页面:

 <form id="form1" method="post" action="../Handel/H_img.ashx" enctype="multipart/form-data" target="hidIFrame">        <div>            <input type="file" id="fil_img" name="fil_img" />        </div>        <div>            <img id="img" src=http://www.mamicode.com/"" />        </div>    </form>    <iframe name="hidIFrame" id="hidIFrame" width="0" height="0" style="border: 0;"></iframe>
View Code

  其实要做到在当页面显示最关键的就是iframe,在这过程中一定要在 form中 设置一个跟iframe 同名的target值.

   在一般处理程序中存值:

      private void addImg(HttpContext context)        {            string retVal = "";            HttpPostedFile file = context.Request.Files["fil_img"];            string _extensionName = ioFile.Path.GetExtension(file.FileName).TrimStart(.);            //文件不可以超过10M            if (context.Request.Files["fil_img"].ContentLength > 1024 * 1204 * 10)            {                retVal = "0";            }            else            {                //重命名                retVal = Guid.NewGuid().ToString("N") + "_" + ioFile.Path.GetExtension(context.Request.Files["fil_img"].FileName);                file.SaveAs(ioFile.Path.Combine(HttpContext.Current.Server.MapPath("/img/"),                  retVal));            }            context.Response.Write(retVal);        }
View Code

 

 

          

 

图片上传_及时显示