图片上传

js实现上传图片预览的方法。

图片上传及预览

1
2
3
4
5
6
7
8
9
#preview, .img, img
  {
    width:200px;
    height:200px;
  }
#preview
{
  border:1px solid #000;
}
1
2
3
4
5
<form enctype="multipart/form-data" action="*/upload/image" method="post">
    <input type="file" name="file" accept="image/*;capture=camera" onchange="preview(this)"/>
    <input type="submit" value="上传" >
    <div id="preview"></div>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
function preview(file){
    var preDiv = document.getElementById("preview");

    if(file.files && file.files[0]){
        var reader = new FileReader();
        reader.onload = function(evt){
            preDiv.innerHTML = '<img src="' + evt.target.result + '" />';
        }
        reader.readAsDataURL(file.files[0]);
    }else{
        preDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }
}
0%