标签：选择图片 使用 jquery svg load Enctype jpg target init
页面HTML
<div>
<img src="@pic.Path" id="img" style="width:200px;height:200px;" />
<form id="form_photo" method="post" action="/N/SavePhoto?id=1">
<input style=" display:none" type="file" name="file" id="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" />
<input type="hidden" name="HeadImg" />
<input type="button" value="提交" onclick="savePhoto(1)" />
</form>
</div>
JS
/*=============File控件选择图片的时候在Html5下马上预览=================*/ function InitFile(fileId, imgId) { $("#" + imgId).click(function () { $("#" + fileId).trigger("click"); }); document.getElementById(fileId).onchange = function (evt) { // 如果浏览器不支持FileReader，则不处理 if (!window.FileReader) return; var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { if (!f.type.match(‘image.*‘)) { continue; } var reader = new FileReader(); reader.onload = (function (theFile) { return function (e) { // img 元素 document.getElementById(imgId).src = e.target.result; }; })(f); reader.readAsDataURL(f); } } } InitFile("file", "img"); //h5选择图片加载
注：由于
accept="image/*"的缘故，使用谷歌浏览器打开图片文件，响应5~6S（效果不佳，IE浏览器不会--秒开）
查找资料之后修改成
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
但也一样（IE浏览器不会--秒开），有高见的请求支援
还有就是，form表单提交文件的话，需要加个enctype="multipart/form-data"，
我是使用AJAX提交的（这个需要引用jquery-form.js）
本人新手小白，只是写一写记录，感谢指导我的大大。
标签：选择图片 使用 jquery svg load Enctype jpg target init
原文地址：http://www.cnblogs.com/dzw159/p/6189721.html
