我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
当前回答
有几种方法可以做到这一点。最有效的方法是在<input>的文件上使用URL.createObjectURL()。将此URL传递给img.src,告诉浏览器加载提供的图像。
下面是一个示例:
<input-type=“file”accept=“image/*”onchange=“loadFile(event)”><img id=“output”/><脚本>var loadFile=函数(事件){var output=document.getElementById('output');output.src=URL.createObjectURL(event.target.files[0]);output.onload=函数(){URL.revokeObjectURL(output.src)//释放内存}};</script>
您还可以使用FileReader.readAsDataURL()从<input>解析文件。这将在内存中创建一个字符串,其中包含图像的base64表示。
<input-type=“file”accept=“image/*”onchange=“loadFile(event)”><img id=“output”/><脚本>var loadFile=函数(事件){var reader=新文件读取器();reader.onload=函数(){var output=document.getElementById('output');output.src=读取结果;};reader.readAsDataURL(event.target.files[0]);};</script>
其他回答
我已经制作了一个插件,由于互联网,它可以在IE 7+中生成预览效果,但几乎没有限制。我把它放进github页面,这样更容易获取
$(函数(){$(“input[name=file1]”).previewimage({div:“.preview”,imgwidth:180,高度:120});$(“input[name=file2]”).previewimage({div:“.preview 2”,imgwidth:90,高度:90});});.preview>div{显示:内联块;文本对齐:居中;}.preview2>div{显示:内联块;文本对齐:居中;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><script src=“https://rawgit.com/andrewng330/PreviewImage/master/preview.image.min.js“></script>预览<div class=“preview”></div>预览2<div class=“preview2”></div><form action=“#”method=“POST”enctype=“multipart/form data”><input-type=“file”name=“file1”><input-type=“file”name=“file2”><input-type=“submit”></form>
这是我的代码。支持IE[6-9]、chrome 17+、firefox、Opera 11+、Maxthon3
函数previewImage(fileObj,imgPreviewId){var allowExtetion=“.jpg,.bmp,.gif,.png”//允许上载文件类型document.getElementById(“hfAllowPicSuffix”).value;var extention=fileObj.value.substring(fileObj.value.lastIndexOf(“.”)+1).toLowerCase();var browserVersion=window.navigator.userAgent.toUpperCase();如果(allowExtendition.indexOf(extention)>-1){if(fileObj.files){if(window.FileReader){var reader=新文件读取器();reader.onload=函数(e){document.getElementById(imgPreviewId).setAttribute(“src”,e.target.result);};reader.readAsDataURL(fileObj.files[0]);}否则如果(browserVersion.indexOf(“SAFARI”)>-1){警告(“不支持低于broswer的Safari6.0”);}}否则如果(browserVersion.indexOf(“MSIE”)>-1){如果(browserVersion.indexOf(“MSIE 6”)>-1){//ie6document.getElementById(imgPreviewId).setAttribute(“src”,fileObj.value);}其他{//ie[7-9]文件对象选择();fileObj.blur();var newPreview=文档.getElementById(imgPreviewId);newPreview.style.border=“实心1px#eeeeee”;newPreview.style.filter=“progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='”+document.selection.createRange().text+“')”;newPreview.style.display=“块”;}}否则如果(browserVersion.indexOf(“FIREFOX”)>-1){//FIREFOXvar firefoxVersion=parseFloat(browserVersion.toLowerCase().match(/frefox\/([\d.]+)/)[1]);如果(firefoxVersion<7){//firefox7以下document.getElementById(imgPreviewId).setAttribute(“src”,fileObj.files[0].getAsDataURL());}其他{//firefox7.0+document.getElementById(imgPreviewId).setAttribute(“src”,window.URL.createObjectURL(fileObj.files[0]));}}其他{document.getElementById(imgPreviewId).setAttribute(“src”,fileObj.value);}}其他{警报(“仅支持”+allowExtension+“后缀”);fileObj.value=“”//清除选定文件如果(browserVersion.indexOf(“MSIE”)>-1){文件对象选择();document.selection.clear();}}}函数更改文件(elem){//文件对象,预览img标记id预览图像(elem,'imagePreview')}<input-type=“file”id=“netBarBig”onchange=“changeFile(this)”/><img src=“”id=“imagePreview”style=“width:120px;height:80px;”alt=“”/>
imgInp.oncange=evt=>{const[file]=imgInp.fileif(文件){blah.src=URL.createObjectURL(文件)}}<form runat=“server”><input accept=“image/*”type='file'id=“imgInp”/><img id=“blah”src=“#”alt=“your image”/></form>
LeassTaTT的答案在FF和Chrome等“标准”浏览器中运行良好。IE的解决方案存在,但看起来有所不同。此处描述了跨浏览器解决方案:
在HTML中,我们需要两个预览元素,img用于标准浏览器,div用于IE
HTML格式:
<img id="preview"
src=""
alt=""
style="display:none; max-width: 160px; max-height: 120px; border: none;"/>
<div id="preview_ie"></div>
在CSS中,我们指定了以下特定于IE的内容:
CSS:
#preview_ie {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
在HTML中,我们包括标准和特定于IE的Javascript:
<script type="text/javascript">
{% include "pic_preview.js" %}
</script>
<!--[if gte IE 7]>
<script type="text/javascript">
{% include "pic_preview_ie.js" %}
</script>
pic_preview.js是LeassTaTT答案中的Javascript。将$(“#blah”)替换为$(“#预览”),并添加$(“#预览”).show()
现在,特定于IE的Javascript(pic_preview_IE.js):
function readURL (imgFile) {
var newPreview = document.getElementById('preview_ie');
newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value;
newPreview.style.width = '160px';
newPreview.style.height = '120px';
}
就是这样。适用于IE7、IE8、FF和Chrome。请在IE9中测试并报告。IE预览的想法可以在这里找到:http://forums.asp.net/t/1320559.aspx
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
https://stackoverflow.com/a/59985954/8784402
ES2017方式
//将文件转换为base64 url常量readURL=文件=>{return new Promise((res,rej)=>{const reader=新文件读取器();reader.onload=e=>res(e.target.result);reader.oneror=e=>rej(e);reader.readAsDataURL(文件);});};//用于演示const fileInput=document.createElement('input');fileInput.type=“文件”;const img=document.createElement('img');img.attributeStyleMap.set(“最大宽度”,“320px”);document.body.appendChild(fileInput);document.body.appendChild(img);常量预览=异步事件=>{const file=event.target.files[0];const-url=等待读取url(文件);img.src=url;};fileInput.addEventListener('change',预览);