使用html input标签解决调用本地相册中图片上传和预览的问题

前些日子项目中遇到了一个问题（移动端项目），就是在反馈页面点击上传图片的时候，实如今本地读取照片并预览的效果，这样的实现效果能够避开把图片上传到服务器在预览的尴尬，具体的页面展现效果以下：

具体的代码以下（偷个懒，也为了你们看的更方便，就截图了...）

在这里面按钮的呈现样式是经过字体实现的，用的是阿里图标库，而后在图标的上面就是图中的input按钮了，只是input给它全透明了，因此咱们看到的是一个"十"字的标志，这里面input的类型是file，accept是指上传文件的类型，这里面咱们能够对要上传的文件进行一些限制，由于上传的是图片，因此图片的目录是image，此外还有audio、video，可是如今尚未对文件类型进行限制，因此要在他们的后面加上（如图片）.gif、.png等等，想省事，那就直接image/*了，这样的话选择的范围也广一些，固然，实际项目中仍是须要根据具体要求来作的，这一步作完以后，就会直接调用本地的文件夹了，Android效果以下：

苹果手机效果以下：

苹果手机的话是支持拍照的，Android不支持，效果出现以后，就是经过js代码进行相应的操做了，代码以下：

// 函数 从手机上导入预览照片
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();//FileReader() 用于读取文件
        reader.readAsDataURL(input.files[0]);//异步加载文件
        reader.onload = function (e) {
            $(".imgAddButton").before("<li><img src="+e.target.result+" /></li>");
            // 计算预览照片数量
            $(".popUpImgTitle>span:last-child>i:first-child").html($(".popUpImgList>ul>li").length-1);
        }
    }
}
// 调用函数 从手机上导入预览照片
$("#imgInp").change(function(){
    if (parseInt($(".popUpImgTitle>span:last-child>i:first-child").html()) < 4) {
        readURL(this);
    } else {
        mui.alert("图片添加已达上限"," ");
    }
});

由于只能上传四张图片，因此我对其进行了一个判断，主要的代码还都是在readURL()函数里面，其中$("#imgInp")是指点击的那个彻底透明的input，input.files是指判断是否上传了文件，input.files[0]是指这个文件数组里面的第一个，若是条件都为真，那么就建立一个FileReader() 实例，做用就是读取文件用的，是文件的API，具体能够参考这个网址 https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader，其中readAsDataURL用于异步加载文件，加载完成以后经过onload()函数进行相关的操做，图片的路径是e.target.result获取到，并把它座位img的src，好了，到此上传图片的功能就实现了，具体的效果以下：

可是如今上传的方式是一张一张上传的，不是太方便，后期再研究了，参考的网址有两个，感谢他们的帮助

https://www.cnblogs.com/wuxiexy/p/6738928.html

http://blog.csdn.net/taohai123/article/details/53302405

转载请注明出处，谢谢。