图片上传_及时显示

浏览数：26 / 时间：2015年06月09日

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

在学校时,拖控件是我最喜欢做的事,因为很简单方便.从来没有考略过性能之类的问题,绝对做出来我就很厉害了.但是现在到了公司完全是老鸟鄙视的对象,虽然公司没有明确规定你不能拖控件,但是可能是虚荣心吧,努力扔掉控件,像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="" />
        </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);
        }