Question

在将文件发送到服务器之前，需要通过文件上传显示添加到文档中的图像。

拥有以下标记：

<body>
    <div id="image-container">
        <h2>Image Chosen form the File System:</h2>
        <!-- Chosen image is displayed here, in an image tag via Javascript -->
    </div>
    <label for="image-input">Select an Image from Your File System to Display Above</label>
    <input id="image-input" type="file" />
    <input type="submit" value="Display Image Chosen" />
</body>

当用户点击按钮时，所选图像应显示在div中。

Answer 1

有点像这样......

以下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);
});

以及相关的HTML：

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

检查此问题http://jsfiddle.net/LvsYc/

Answer 2

您必须放置一个调用javascript脚本的函数，以便首先将图像存储在服务器的缓存中。然后onclick动作将调用负责渲染图像的函数将从缓存中获取图像并进行渲染。

使用Javascript显示通过文件上传添加的图像

2 个答案: