html5 图片预览

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012507347/article/details/48394955

html5 图片预览

• input file
• 多文件上传
• FileReader
• readAsDataURL

input file

在文件上传中使用 accept 属性。

<input type="file" name="photos" id="photos" accept="image/gif, image/jpeg">

<input type="file" name="photos" id="photos" accept="image/*">

它规定能够通过文件上传进行提交的文件类型。

W3C提示：请避免使用该属性。应该在服务器端验证文件上传。

用input file选择一张图片后 查看这个input对象。其中有一个files属性

其中包含了图片的部分信息，为后续做准备。

多文件上传

在文件上传中使用 multiple属性，允许多文件。

<input type="file" name="photos" id="photos" accept="image/*" multiple="multiple">

此外 在name中加”[]”，以便后台程序的处理。

如果没有[]

<form action="test.php" enctype="multipart/form-data" method='post'>
<input type="file" name="photos" id="photos" accept="image/*" multiple="multiple">
</form>

在php中 var_dump($_FILES)

array(1) { 
["photos"]=> array(5) { 
    ["name"]=> string(5) "7.jpg" 
    ["type"]=> string(10) "image/jpeg" 
    ["tmp_name"]=> string(24) "D:\temp\file\php644F.tmp"
    ["error"]=> int(0)
    ["size"]=> int(8258) 
  }
}

如果有[]

<form action="test.php" enctype="multipart/form-data" method='post'>
<input type="file" name="photos[]" id="photos" accept="image/*" multiple="multiple">
</form>

在php中 var_dump($_FILES)

array(1) {
["photos"]=> array(5) { 
    ["name"]=> array(4) { 
        [0]=> string(14) "3 - 副本.jpg" 
        [1]=> string(5) "3.jpg"
        [2]=> string(18) "6 - 副本 (2).jpg"
        [3]=> string(14) "7 - 副本.jpg"
    }
    ["type"]=> array(4) {
        [0]=> string(10) "image/jpeg"
        [1]=> string(10) "image/jpeg"
        [2]=> string(10) "image/jpeg"
        [3]=> string(10) "image/jpeg"
    }
    ["tmp_name"]=> array(4) {
        [0]=> string(24) "D:\temp\file\php7235.tmp"
        [1]=> string(24) "D:\temp\file\php7236.tmp"
        [2]=> string(24) "D:\temp\file\php7237.tmp"
        [3]=> string(24) "D:\temp\file\php7238.tmp"
    }
    ["error"]=> array(4) {
        [0]=> int(0) [1]=> int(0) [2]=> int(0) [3]=> int(0)
    }
    ["size"]=> array(4) {
        [0]=> int(4842)
        [1]=> int(4842)
        [2]=> int(3410)
        [3]=> int(8258)
    }
}
}

FileReader

FileReader API
FileReader 是一个可以读取文件的对象，有事件处理程序，有方法。
首先创建一个FileReader对象

var reader = new FileReader();

然后写当读取操作成功完成时调用的函数

reader.onloadend = function (e) {
     var urlData = e.target.result;
    $(".update-photo-list").prepend("<div class='photo-item'><img src='" + urlData + "' /></div>");
   }; 

其中e.target就是创建的reader对象，result是FileReader的一个属性，

result:读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读.

接下来就可以读取数据了，FileReader有四种读取文件的方式，其中读取图片一般用readAsDataURL()，读取后result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.

reader.readAsDataURL(fileList[i]);

综合

<form action="test.php" enctype="multipart/form-data" method='post'>
<input type="file" name="photos[]" id="photos" accept="image/*" multiple="multiple">
</form>

function showPhoto(){
    var fileList = document.getElementById('photos').files;
    if(fileList){
        for(var i = 0; i < fileList.length; i ++){
            if(!/image\/\w+/.test(fileList[i].type)){  
                continue;  
                }
                //读取文件
            var reader = new FileReader();
            reader.onloadend = function (e) {
                var urlData = e.target.result;
                $(".photo-list").prepend("<div class='photo-item'><img src='" + urlData + "' /></div>");
            }; 
            reader.readAsDataURL(fileList[i]);
        }
    }
}