提交之前显示上传的图片

Question

我希望在点击上传按钮之前显示已上传的图像。我尝试了，但它没有起作用，请检查下面的代码。当我选择要加载的图像时，没有图像出现，然后通过firebug的帮助，我发现我的代码正在生成奇怪的URL。您也可以在这里检查fiddle：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;}

- Kamal

---

这不会按照你的期望工作，因为通常浏览器在上传之前会伪造图像路径。为了实现这一点，你需要使用HTML5或其他方法。 - BenM

可能是重复的问题：在上传之前预览图像。 - Dimitar Dimitrov

你的需求需要在IE中工作吗？如果是，那么在实际提交表单之前，你将不得不通过其他表单的帮助将图像保存在服务器上。 - Hussain Akhtar Wahid 'Ghouri'

我只考虑IE9及以上版本，请分享任何示例。 - Kamal

Answer 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()

请参考：如何在上传前和上传后预览图像？

- Muhammad Omar ElShourbagy

Answer 2

如果您的要求是在IE以外的浏览器中工作，那么您可以按照此链接，它对您有完美的答案。

但是，如果您的要求还包括IE，则需要执行以下几个步骤：

步骤1：创建一个不同于主表单的表单，这个不同的表单不能在主表单内部，因为表单内部的表单无法提交。

步骤2：在您的新表单内部保留。

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

步骤三：在文件字段的更改事件上调用ajax函数

步骤四：此ajax函数仅提交图像字段的新表单，并将图像存储在服务器端

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

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

- Hussain Akhtar Wahid 'Ghouri'

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

- Merrin K