Question

我想在点击上传按钮之前显示上传的图片。我试过但它不起作用，请检查下面的代码。当我选择要加载的图像时，没有图像会出现，之后在firebug的帮助下我发现我的代码正在制作奇怪的网址。你也可以在这里查看小提琴： 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;}

Answer 1

如果您的要求是在IE以外的浏览器中工作然后你可以关注this link，它有完美的答案

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

第2步：在新表单中保留

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

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

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

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

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

Answer 2

HTML中的

：

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

通过类型FileReader

的Javascript / JQuery

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?

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>

在点击提交按钮之前显示上传的图像

3 个答案: