试试这个

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

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

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

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

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

短双衬套

这是cmlevy答案的大小改进-尝试

<input-type=file oninput=“pic.src=window.URL.createObjectURL（this.files[0]）”><img id=“pic”/>

这个解决方案怎么样？

只需将数据属性“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演示

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

希望这对某人有所帮助。

这是我的代码。支持IE[6-9]、chrome 17+、firefox、Opera 11+、Maxthon3

函数previewImage（fileObj，imgPreviewId）{var allowExtetion=“.jpg，.bmp，.gif，.png”//允许上载文件类型document.getElementById（“hfAllowPicSuffix”）.value；var extention=fileObj.value.substring（fileObj.value.lastIndexOf（“.”）+1）.toLowerCase（）；var browserVersion=window.navigator.userAgent.toUpperCase（）；如果（allowExtendition.indexOf（extention）>-1）{if（fileObj.files）{if（window.FileReader）{var reader=新文件读取器（）；reader.onload=函数（e）{document.getElementById（imgPreviewId）.setAttribute（“src”，e.target.result）；};reader.readAsDataURL（fileObj.files[0]）；}否则如果（browserVersion.indexOf（“SAFARI”）>-1）{警告（“不支持低于broswer的Safari6.0”）；}}否则如果（browserVersion.indexOf（“MSIE”）>-1）{如果（browserVersion.indexOf（“MSIE 6”）>-1）｛//ie6document.getElementById（imgPreviewId）.setAttribute（“src”，fileObj.value）；}其他{//ie[7-9]文件对象选择（）；fileObj.blur（）；var newPreview=文档.getElementById（imgPreviewId）；newPreview.style.border=“实心1px#eeeeee”；newPreview.style.filter=“progid:DXImageTransform.Microsoft.AlphaImageLoader（sizingMethod='scale'，src='”+document.selection.createRange（）.text+“'）”；newPreview.style.display=“块”；}}否则如果（browserVersion.indexOf（“FIREFOX”）>-1）{//FIREFOXvar firefoxVersion=parseFloat（browserVersion.toLowerCase（）.match（/frefox\/（[\d.]+）/）[1]）；如果（firefoxVersion<7）｛//firefox7以下document.getElementById（imgPreviewId）.setAttribute（“src”，fileObj.files[0].getAsDataURL（））；}其他｛//firefox7.0+document.getElementById（imgPreviewId）.setAttribute（“src”，window.URL.createObjectURL（fileObj.files[0]））；}}其他{document.getElementById（imgPreviewId）.setAttribute（“src”，fileObj.value）；}}其他{警报（“仅支持”+allowExtension+“后缀”）；fileObj.value=“”//清除选定文件如果（browserVersion.indexOf（“MSIE”）>-1）{文件对象选择（）；document.selection.clear（）；}}}函数更改文件（elem）{//文件对象，预览img标记id预览图像（elem，'imagePreview'）}<input-type=“file”id=“netBarBig”onchange=“changeFile（this）”/><img src=“”id=“imagePreview”style=“width:120px；height:80px；”alt=“”/>