图片上传_及时显示
其实到现在我从刚毕业的雄心壮志,已经变为攀爬的小鸟了.虽然在没有任务的情况下贪玩着,不过在接到任务的时,我还是抱着百分之百的心去完成.
在学校时,拖控件是我最喜欢做的事,因为很简单方便.从来没有考略过性能之类的问题,绝对做出来我就很厉害了.但是现在到了公司完全是老鸟鄙视的对象,虽然公司没有明确规定你不能拖控件,但是可能是虚荣心吧,努力扔掉控件,像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>
其实要做到在当页面显示最关键的就是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); }