在点击提交按钮之前显示上传的图片答案

【问题标题】：show uploaded image before clicking on submit button在点击提交按钮之前显示上传的图片
【发布时间】：2013-09-29 11:51:07
【问题描述】：

我想在点击上传按钮之前显示上传的图片。我试过但它不起作用，请检查我下面的代码。当我选择要加载的图像时，不会出现任何图像，在萤火虫的帮助下，我发现我的代码正在制作奇怪的 url。你也可以在这里查看小提琴：http://jsfiddle.net/XdXLJ/

脚本

$(document).ready(function(e) {
    $('#upload').click(function(){
        $('input[type="file"]').show().focus().click().hide();
        $('input[type="file"]').change(function(){

            var val = $('this').val;
            $('.img').append('<img src="'+val+'" />')

            })
        })
})

HTML

<form id="form1" name="form1" method="post" action="">
<input name="" type="file" />
<div id="upload">Upload</div>
<div class="img"></div>
</form>

风格

#upload{float:left; padding:8px 10px; color:#000; background:#CCC; border:1px solid #000;}
input[type="file"]{display:none;}

【问题讨论】：

这不会像您期望的那样工作，因为通常浏览器会在上传之前伪造图像的路径。为了实现这一点，您需要使用 HTML5 或其他方法。
Preview an image before it is uploaded的可能重复
您的要求是否也需要它在 IE 中工作？如果是，那么您将不得不在其他表单的帮助下实际提交表单之前将图像保存在服务器上的某个位置
我只考虑 IE9 及更高版本.. 请分享任何示例

标签： jquery file-upload

【解决方案1】：

在 HTML 中：

<input type='file' onchange="readURL(this);" />

Javascript/JQuery 通过类型FileReader

if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }

其中input 是<input type="file"> 元素如果您使用 AjaxToolKit AsyncFileUpload，您可以使用以下方式获取输入：fileUploadElement.get_inputFile()

请参考：how to preview a image before and after upload?

【讨论】：

【解决方案2】：

如果您的要求是在 IE 以外的浏览器中工作那么您可以关注this link，它为您提供完美的答案

但如果您的要求还包括 IE 然后你做几个步骤第1步：创建一个不同的表单，除了你的主表单，这个不同的表单不能在主表单内，因为表单内的表单不能提交。

第 2 步：在新表单中保留

<input type="file" name="imageFileChooser"/>

第 3 步：在文件字段的更改事件中调用 ajax 函数

第 4 步：这个 ajax 函数提交您的新表单，其中只有图像字段，并将图像存储在服务器端

第 5 步：当您想要预览表单时，您需要从服务器调用临时保存的图像。

第六步：预览提交后，提交主表单并从服务器的临时位置获取图像，或者您也可以保留一个隐藏文件 iput 标签携带相同的文件。

【讨论】：

【解决方案3】：

有一个 onchange 事件在选择图像时触发，可以将其定向到加载图像的函数。

点击图片后立即加载图片。

<form>
    <input type="file" onchange="preview()">
    <img src="" width="100px" height="150px" id="frame">
</form>

<script type="text/javascript">
    function preview(){
        frame.src=URL.createObjectURL(event.target.files[0]);
    }
</script>

【讨论】：