上传图像时的图像预览

时间:2013-08-05 07:33:16

标签: file-upload filereader

我使用以下脚本在上传过程中预览图像。但它没有工作,也没有改变src属性。

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
            reader.onload = function (e) {
            $('#field_header_image 1_preview')
                .attr('src',e.target.result)
                    .width(150)
                   .height(200);
            };
            reader.readAsDataURL(input.files[0]);
    }
}

请在这里查看JS小提琴http://jsfiddle.net/sw6fW/

1 个答案:

答案 0 :(得分:0)

<html>
<head>
   <script src="jquery.js"></script>
   <meta charset=utf-8 />
   <title>Auto Image Preview</title>
</head>
<body>
  <input type='file' onchange="readURL(this);" />
  <img id="image_prev" src="#" alt="your image" />


<script>
function readURL(input) {
    if (input.files && input.files[0]) {
     var reader = new FileReader();
     reader.onload = function (e) {
     $('#image_prev')
         .attr('src', e.target.result)
         .width(150)
         .height(150);
    };
   reader.readAsDataURL(input.files[0]);
  }
}
</script>

</body>
</html>

请参阅此链接以回答您的问题

http://rameshworpathak.com.np/preview-uploaded-image-using-jquery-while-uploading-image/

希望它会帮助你