我希望能够在上传文件（图像）之前预览它。预览操作应该在浏览器中全部执行，而不使用Ajax上传图像。
我该怎么做？
当前回答
这里有一种在上传前使用纯javascript预览图像的简单方法；
//profile_change is the id of the input field where we choose an image
document.getElementById("profile_change").addEventListener("change", function() {
//Here we select the first file among the selected files.
const file = this.files[0];
/*here i used a label for the input field which is an image and this image will
represent the photo selected and profile_label is the id of this label */
const profile_label = document.getElementById("profile_label");
//Here we check if a file is selected
if(file) {
//Here we bring in the FileReader which reads the file info.
const reader = new FileReader();
/*After reader loads we change the src attribute of the label to the url of the
new image selected*/
reader.addEventListener("load", function() {
dp_label.setAttribute("src", this.result);
})
/*Here we are reading the file as a url i.e, we try to get the location of the
file to set that as the src of the label which we did above*/
reader.readAsDataURL(file);
}else {
//Here we simply set the src as default, whatever you want if no file is selected.
dp_label.setAttribute("src", "as_you_want")
}
});
这里是HTML；
<label for="profile_change">
<img title="Change Profile Photo" id="profile_label"
src="as_you_want" alt="DP" style="height: 150px; width: 150px;
border-radius: 50%;" >
</label>
<input style="display: none;" id="profile_change" name="DP" type="file" class="detail form-control">
其他回答
使用jquery预览多个文件
$（文档）.ready（函数）{$（'#image'）.change（function（）{$（“#frames”）.html（“”）；对于（var i=0；i<$（this）[0].files.length；i++）{$（“#frames”）.append（'<img src=“'+window.URL.createObjectURL（this.files[i]）+'”width=“100px”height=“100px“/>'）；}});});<head><script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js“></script></head><body><input-type=“file”id=“image”name=“image[]”多个/><br/><div id=“frames”></div></body>
使用JavaScript（jQuery）和HTML5的多个图像示例
JavaScript（jQuery）
function readURL(input) {
for(var i =0; i< input.files.length; i++){
if (input.files[i]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = $('<img id="dynamic">');
img.attr('src', e.target.result);
img.appendTo('#form1');
}
reader.readAsDataURL(input.files[i]);
}
}
}
$("#imgUpload").change(function(){
readURL(this);
});
}
标记（HTML）
<form id="form1" runat="server">
<input type="file" id="imgUpload" multiple/>
</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
有几种方法可以做到这一点。最有效的方法是在＜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>
试试这个
window.onload=函数（）{if（window.File&&window.FileList&&windows.FileReader）{var filesInput=document.getElementById（“uploadImage”）；filesInput.addEventListener（“更改”，函数（事件）{var files=事件目标文件；var output=document.getElementById（“result”）；对于（var i=0；i<files.length；i++）{var file=文件[i]；if（！file.type.match（'image'））持续var picReader=新文件读取器（）；picReader.addEventListener（“加载”，函数（事件）{var picFile=事件目标；var div=document.createElement（“div”）；div.innerHTML=“<img class='umbnail'src='”+picFile.result+“'”+“title='”+picFile.name+“'/>”；output.insertBefore（div，null）；}); picReader.readAsDataURL（文件）；}});}}<input type=“file”id=“uploadImage”name=“termek_file”class=“file_input”multiple/><div id=“result”class=“uploadPreview”>
推荐文章
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 有Grunt生成index.html不同的设置
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 防止在ASP中缓存。NET MVC中使用属性的特定操作
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- jQuery: keyPress退格键不火?
- XMLHttpRequest Origin null不允许Access-Control-Allow-Origin for file:/// to file:///(无服务器)
- JavaScript: override alert()
- 重置setTimeout
- 如何确保<select>表单字段被禁用时提交?
