我希望能够在上传文件（图像）之前预览它。预览操作应该在浏览器中全部执行，而不使用Ajax上传图像。
我该怎么做？
当前回答
短双衬套
这是cmlevy答案的大小改进-尝试
<input-type=file oninput=“pic.src=window.URL.createObjectURL（this.files[0]）”><img id=“pic”/>
其他回答
使用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>
用于多图像上传（对@IvanBaev解决方案的修改）
function readURL(input) {
if (input.files && input.files[0]) {
var i;
for (i = 0; i < input.files.length; ++i) {
var reader = new FileReader();
reader.onload = function (e) {
$('#form1').append('<img src="'+e.target.result+'">');
}
reader.readAsDataURL(input.files[i]);
}
}
}
http://jsfiddle.net/LvsYc/12330/
希望这对某人有所帮助。
这里有一种在上传前使用纯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">
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>
试试这个
在将图像从浏览器上传到服务器之前预览图像，而不使用Ajax或任何复杂的功能。
它需要一个“onChange”事件来加载图像。
函数预览（）{frame.src=URL.createObjectURL（event.target.files[0]）；}<表单><input-type=“file”onchange=“preview（）”><img id=“frame”src=“”width=“100px”height=“100px“/></form>
要预览多个图像，请单击此处
