3

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

3 回答 3

2

在 HTML 中：

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

Javascript/JQuery 通过 TypeFileReader 

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如果您使用 AjaxToolKit AsyncFileUpload ，元素在哪里<input type="file">，您可以使用以下方法获取输入：fileUploadElement.get_inputFile()

请参考：图片上传前后如何预览？

于 2014-01-29T14:03:37.630 回答
1

如果您的要求是在 IE 以外的浏览器中工作，那么您可以点击此链接，它会为您提供完美的答案

但如果您的要求还包括 IE，那么您需要执行几个步骤 第 1 步：创建一个不同的表单，而不是您的主表单，这个不同的表单不能在主表单内，因为表单内的表单不能提交。

第 2 步：在您的新表格中保留

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

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

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

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

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

于 2013-09-24T10:20:47.383 回答
0

选择图像时会触发一个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>
于 2020-06-08T04:49:46.533 回答