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

我该怎么做?


当前回答

试试这个

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”>

其他回答

对于我的应用程序,使用加密的GET url参数,只有这一点有效。我总是得到一个TypeError:$(…)为空。摘自https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

函数previewFile(){var preview=document.querySelector('img');var file=document.querySelector('input[type=file]').files[0];var reader=新文件读取器();reader.addEventListener(“load”,函数(){preview.src=读取结果;},假);if(文件){reader.readAsDataURL(文件);}}<input-type=“file”onchange=“previewFile()”><br><img src=“”height=“200”alt=“图像预览…”>

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

function assignFilePreviews() {
    $('input[data-previewable=\"true\"]').change(function() {
        var prvCnt = $(this).attr('data-preview-container');
        if (prvCnt) {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = $('<img>');
                    img.attr('src', e.target.result);
                    img.error(function() {
                        $(prvCnt).html('');
                    });
                    $(prvCnt).html('');
                    img.appendTo(prvCnt);
                }
                reader.readAsDataURL(this.files[0]);
            }
        }
    });
}
$(document).ready(function() {
    assignFilePreviews();
});

HTML格式

<input type="file" data-previewable="true" data-preview-container=".prd-img-prv" />
<div class = "prd-img-prv"></div>

当选择了无效类型(例如pdf)的文件时,这也会处理这种情况

这个解决方案怎么样?

只需将数据属性“data type=editable”添加到图像标记中,如下所示:

<img data-type="editable" id="companyLogo" src="http://www.coventrywebgraphicdesign.co.uk/wp-content/uploads/logo-here.jpg" height="300px" width="300px" />

还有你项目的脚本。。。

function init() {
    $("img[data-type=editable]").each(function (i, e) {
        var _inputFile = $('<input/>')
            .attr('type', 'file')
            .attr('hidden', 'hidden')
            .attr('onchange', 'readImage()')
            .attr('data-image-placeholder', e.id);

        $(e.parentElement).append(_inputFile);

        $(e).on("click", _inputFile, triggerClick);
    });
}

function triggerClick(e) {
    e.data.click();
}

Element.prototype.readImage = function () {
    var _inputFile = this;
    if (_inputFile && _inputFile.files && _inputFile.files[0]) {
        var _fileReader = new FileReader();
        _fileReader.onload = function (e) {
            var _imagePlaceholder = _inputFile.attributes.getNamedItem("data-image-placeholder").value;
            var _img = $("#" + _imagePlaceholder);
            _img.attr("src", e.target.result);
        };
        _fileReader.readAsDataURL(_inputFile.files[0]);
    }
};

// 
// IIFE - Immediately Invoked Function Expression
// https://stackoverflow.com/questions/18307078/jquery-best-practises-in-case-of-document-ready
(

function (yourcode) {
    "use strict";
    // The global jQuery object is passed as a parameter
    yourcode(window.jQuery, window, document);
}(

function ($, window, document) {
    "use strict";
    // The $ is now locally scoped 
    $(function () {
        // The DOM is ready!
        init();
    });

    // The rest of your code goes here!
}));

见JSFiddle演示

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