我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。

我该怎么做?


当前回答

干净简单J小提琴

当您希望通过div或按钮间接触发事件时,这将非常有用。

<img id="image-preview"  style="height:100px; width:100px;"  src="" >

<input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">

<button  onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button>


<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
    var fileinputElement = document.getElementById(hidden_input_image);
    fileinputElement.click();
}     
</script>

其他回答

这里有一种在上传前使用纯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">

单层解决方案:

下面的代码使用对象URL,在查看大型图像时,它比数据URL更有效(数据URL是包含所有文件数据的巨大字符串,而对象URL只是引用内存中文件数据的短字符串):

<img id=“blah”alt=“your image”width=“100”height=“100”/><输入类型=“文件”onchange=“document.getElementById('blah').src=window.URL.createObjectURL(this.files[0])”>

生成的URL如下:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

干净简单J小提琴

当您希望通过div或按钮间接触发事件时,这将非常有用。

<img id="image-preview"  style="height:100px; width:100px;"  src="" >

<input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">

<button  onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button>


<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
    var fileinputElement = document.getElementById(hidden_input_image);
    fileinputElement.click();
}     
</script>

有几种方法可以做到这一点。最有效的方法是在<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>

用于多图像上传(对@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/

希望这对某人有所帮助。