Jquery:如何使用“;值“;的<输入类型＝“;文件“>领域

Jquery: How to dynamically SHOW image using the "value" of <input type="file"> Field

本文关键字：类型 领域 文件 输入 gt 何使用 Jquery lt      更新时间：2023-09-26

我想知道是否有一种方法可以动态显示用户刚刚上传到inputtype="file"字段的图像。

例如，到目前为止，我有以下代码：


image_upload.html

<form id ="image_upload_form" action="" method="post" enctype="multipart/form-data">
    <input id ="id_iamge" type="file" name="image" />
    <input type="submit" value="Upload" />
</form>
<div id="image_view">
    <img id="uploaded_image">
</div>


upload.js

$(document).ready(function() {
    $("#id_image").change(file_select);
});
function file_select(event) {
    $("#uploaded_image").attr("src", $("#id_image").val());
}


所以我基本上想展示用户刚刚上传到球场上的图片。

当然，我知道如果用户已经提交了表单，并且图像已经在我的数据库服务器中，我可以很容易地查看图像。

但是，我想在图像提交到数据库服务器之前预览图像。

为了做到这一点，我想我必须在上传程序自己的计算机中找到图像的PATH，然后将"本地路径"设置为图像的"src"。

有没有办法获取用户刚刚提交的图像的本地路径？

（我上面的Javascript代码显然不起作用，因为它只是将图像文件的NAME而不是绝对的Path设置为"src"。例如，当我运行该代码并上传图像时，我得到的是：

结果：

<img id="uploaded_image" src="random_image.jpg" />

它没有显示任何内容。

看看这个示例，它应该可以工作：http://jsfiddle.net/LvsYc/

HTML:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

JS:

function readURL(input) {
    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]);
    }
}
$("#imgInp").change(function(){
    readURL(this);
});

使用此代码。它会起作用：

<!-- Java script code, use jquery library. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
    function showimagepreview(input) 
    {
      if (input.files && input.files[0]) 
      {
        var filerdr = new FileReader();
        filerdr.onload = function(e) {
            $('#imgDisplayarea').attr('src', e.target.result);
        };
        filerdr.readAsDataURL(input.files[0]);
      }
    }
</script>
<!-- HTML -->
<form>
    <div>
        <input type="file" name="imgShow" id="imgShow" onchange="imagePreview(this)" />
    </div>
    <img id="imgDisplayarea"/>
</form>
相关文章：