选择本地照片之后即显示在Img中(客户体验)
最近转战MVC项目,然后又再次遇到照片上传的实现,之前都是使用ASP.NET,虽然也有照片上传,而且出于客户体验考虑,
也实现了选择本地照片之后即时显示在IMG中,在这里就简单介绍其实现(ASP.NET),代码就不再写了
- ASP.NET实现方式(当时使用的是服务器控件UpLoad):
- 一个Img控件,一个UpLoad控件
- 先创建另一个新的ASP.NET页面,上传照片的时候,先把照片上传显示在这个ASP.NET页面上,然后IMG中的src链接到这个页面就O了(方法很笨,但是刚出来就是这么实现的,现在可以用插件实现了)
- 一个Img控件,一个UpLoad控件
- MVC实现方式(使用的是Input中的File)
- 一个Img标签,一个file标签
- 实现方式
-
//读取图片并显示到img function readFile() { var file = this.files[0]; if (!/image\/\w+/.test(file.type)) { alert("文件必须为图片!"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { $("#ComPic").attr("src", this.result); } } $(function () { var input = document.getElementById("fileToUpload"); //先判断浏览器是否支持FileReader //浏览器不支持时则选择照片的的标签被禁用 if (typeof FileReader === 'undefined') { alert("抱歉,你的浏览器不支持 FileReader"); input.setAttribute('disabled', 'disabled'); } else { input.addEventListener('change', readFile, false); } });
- 到这里,选择图片之后就可以显示了,但是该注意的是,IE6以下(包含IE6)版本是不支持FileReader的
- 之后就是图片的上传了(在这里,我使用的是异步上传操作,而且数据库中保存的是图片路径,而图片上传到指定的文件夹下)
var fileObj = document.getElementById("fileToUpload").files; var FileController = "/Member/Shop/UpLoadIMG" + "?PicName=" + picName + "&PicType=" + picType; var form = new FormData(); for (var i = 0; i < fileObj.length; i++) form.append("file" + i, fileObj[i]); var xhr = new XMLHttpRequest(); xhr.open("post", FileController, true); xhr.onload = function () { if (xhr.status == 200 && xhr.responseText == "1") { alert("图片上传成功!"); } else {
//图片上传异常时返回的信息 alert(xhr.responseText); } }; xhr.send(form);
- 一个Img标签,一个file标签
- 还有另外一种实现方式,就是使用UpLoadify,可以实现批量上传图片或者文件,包括进度条,这个插件官方文档已有详细介绍,在这就不再多说了。。
posted on 2014-12-06 01:33 PersephoneIS 阅读(598) 评论(1) 编辑 收藏 举报