首页 > 移动平台 > 详细

h5 手机浏览器多文件上传

时间:2019-12-25 22:46:58      阅读:147      评论:0      收藏:0      [点我收藏+]

话不多说直接上代码

以下是h5代码,因为之后qq浏览器和华为和小米自带的浏览器可以一次性选多张图片,所以在其他浏览器下,我们只能采用多个input选多次的方式来实现文件上传

h5 用的框架是jq ui,文件上传的插件也是用的这个不过有一个要注意的就是 input 一定要放在div 下,不能放在ul 下,不然会有非常美妙的效果,你懂得,ul 下只能放li子元素


<
div class="weui-uploader"> <div class="weui-uploader__hd"> <p class="weui-uploader__title">图片上传</p> </div> <div class="weui-uploader__bd"> <ul class="weui-uploader__files" id="uploaderFiles"> </ul> <div class="weui-uploader__input-box" id="inputbox"> <input id="uploaderInput0" class="weui-uploader__input" name="images[0]" type="file" accept="image/*" multiple=""> </div> </div> </div>

下面是js代码

$(function () {
        var tmpl = ‘<li class="weui-uploader__file" style="background-image:url(#url#)"></li>‘,
            $gallery = $("#gallery"),
            $galleryImg = $("#galleryImg"),
            $uploaderFiles = $("#uploaderFiles");


        var imageIndex = 0;

        function jsFileChange(event) {
            console.info("jsFileChange run")
        //这一部分是图片预览的效果
var src, url = window.URL || window.webkitURL || window.mozURL, files = event.target.files; for (var i = 0, len = files.length; i < len; ++i) { var file = files[i]; if (url) { src = url.createObjectURL(file); } else { src = event.target.result; } $uploaderFiles.append($(tmpl.replace(‘#url#‘, src))); }
        //选完当前图片之后隐藏当前input,然后创建一个新的input 来接收下一个图片或文件 $(
"#uploaderInput" + imageIndex).css(‘display‘, ‘none‘); imageIndex++; var imgInputStr = ‘<input id="uploaderInput‘ + imageIndex + ‘" class="weui-uploader__input" name="images[‘ + imageIndex + ‘]" type="file" accept="image/*" multiple="">‘; $("#inputbox").append(imgInputStr); $("#uploaderInput" + imageIndex).on("change", jsFileChange); } $("#uploaderInput0").on("change", jsFileChange); var index; //第几张图片 $uploaderFiles.on("click", "li", function () {
      //预览之后可以删除,这是删除代码 index
= $(this).index(); $galleryImg.attr("style", this.getAttribute("style")); $gallery.fadeIn(100);
        //删除完缩略图之后删除对应的input元素 $(
"#inputbox input:eq(" + index + ")").remove(); }); $gallery.on("click", function () { $gallery.fadeOut(100); }); //删除图片 删除图片的代码也贴出来。 $(".weui-gallery__del").click(function () { console.log(‘删除‘); $uploaderFiles.find("li").eq(index).remove(); }); });

参考:https://www.zhihu.com/question/24212111
 

h5 手机浏览器多文件上传

原文:https://www.cnblogs.com/liouzeshuen/p/12098937.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!