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

我该怎么做?


当前回答

使用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/

希望这对某人有所帮助。

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

默认Iamge

                @Html.TextBoxFor(x => x.productModels.DefaultImage, new {@type = "file", @class = "form-control", onchange = "openFile(event)", @name = "DefaultImage", @id = "DefaultImage" })
                @Html.ValidationMessageFor(model => model.productModels.DefaultImage, "", new { @class = "text-danger" })
                    <img src="~/img/ApHandler.png"  style="height:125px; width:125px" id="DefaultImagePreview"/>
            </div>

 <script>
    var openFile = function (event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function () {
            var dataURL = reader.result;
            var output = document.getElementById('DefaultImagePreview');
            output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
    };
</script>

试试这个


在将图像从浏览器上传到服务器之前预览图像,而不使用Ajax或任何复杂的功能。


它需要一个“onChange”事件来加载图像。

函数预览(){frame.src=URL.createObjectURL(event.target.files[0]);}<表单><input-type=“file”onchange=“preview()”><img id=“frame”src=“”width=“100px”height=“100px“/></form>

要预览多个图像,请单击此处