jquery - 在单击提交按钮之前显示上传的图像

Question

我想在单击上传按钮之前显示上传的图像。我尝试过，但它不起作用，请检查下面的代码。当我选择要加载的图像时，不会出现任何图像，在 Firebug 的帮助下，我发现我的代码正在制作奇怪的网址。您还可以在这里检查 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;}

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

请引用:how to preview a image before and after upload?