手机端实现多图片上传

所属分类:输入-上传

 55161  189  查看评论 (80)
手机端实现多图片上传 ie兼容10

js+css实现手机端的多图片上传,为了方便使用,css和js都未内联,为性能建议使用时改为外联;

如要用到pc端,直接去掉px转换为rem的js代码,修改单位即可;

因multiple在安卓手机中不兼容,所以在安卓上只能一次选中一张图片,在iOS系统上可以实现多图片的上传;

此代码仅为个人使用而编写,若有错误,欢迎提出,接收任何好的建议!

相关插件-上传

jQuery HTML5文件上传美化插件jQuery.filer

jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件。它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文件上传插件
  上传
 28129  82

图片上传插件localResizeIMG

显示原来图片,和压缩后的图片,并且显示大小
  上传
 91298  122

基于Bootstrap 3可预览的HTML5文件上传插件

bootstrapfileinput是一款基于Bootstrap 3.x的HTML5文件上传插件。该文件上传插件带有预览图效果,可同时选择多个文件。该插件使用bootstrap CSS3样式来制作文件上传界面。并且它提供了多国语言,你可以选择使用中文。
  上传
 76660  235

Plupload文件上传插件

Plupload这个JavaScript控件可以让你选择Adobe Flash、Google Gears、HTML5、Microsoft Silverlight、Yahoo BrowserPlus或正常表单Form等多种方法进行文件上传。
  上传
 140369  144

讨论这个项目(80)回答他人问题或分享插件使用方法奖励jQ币

    grin、sun 0
    2018/1/8 15:15:39

    删除后的图片无法二次上传,怎么进行多个上传按钮的手机上传?

    回复
    见你,人群中 0
    2017/12/26 14:16:10

    删除本张图片再次上传本张图片上传不了,怎么解决呢

    回复
    上官吹雪 0
    2017/12/6 14:32:09
    微信中无法调用手机摄像头拍照,怎么解决
        __夏虫语冰。0
        2018/1/9 17:56:39
        在HTML中去掉input的multiple属性,但是就只能单张上传了
    回复
    王军乐 0
    2017/11/14 18:25:02

     如果一次性选多张的话应该就能获取多张  如果是一次一次点击添加 就只能 获取最后一张图片

    这个问题解决就完美了,这个问题能解决吗?????? 回复
    王军乐 0
    2017/11/14 17:00:10

    上传多张图片,后台只能接收到第一张,怎么回事??后台该怎么接收??

        王军乐0
        2017/11/14 17:14:16

        已解决

        以优雅的姿势摸爬滚打0
        2017/12/13 14:07:45
        后台只能接受最后一张图片怎么解决???
    回复
    0
    2017/11/14 10:01:02

    后台怎么获取不到值呀

        王军乐1
        2017/11/15 14:29:37

        前台用formdata

        var formData = new FormData($( "#exeriseForm" )[0]);
        var imgg = [];
        imgg = $('.z_addImg img');
        var imgSrc = [];
        var imgBase64 = [];
        for (var i = 0; i < imgg.length; i++) {
            if (imgg[i].src != 'undefined') {
                imgSrc.push(imgg[i].src) var image = new Image();
                image.src = imgg[i].src;
                var base64 = getBase64Image(image);
                imgBase64.push(base64);
                formData.append("imageName", base64.split(',')[1]);
            }
        }

        后台

        String[] str = request.getParameterValues("imageName");

        就可获取到值,让后用上传base64的图片就行了

        米达斯之手0
        2017/11/28 9:54:43

        getBase64Image  这个方法说是未定义,应该去哪个js文件找?

    回复
    power 0
    2017/10/18 15:13:05

    怎么调不出来相机啊

    回复
    ? 0
    2017/9/27 14:15:52

    上传一张图片 然后删除  再上传相同图片 上传不了 求解答

    回复
    太多 0
    2017/9/15 13:44:51
    图片过大不能上传 回复
    终点~起点 0
    2017/9/6 17:11:24

    上传图片歪了这是什么鬼

    回复
取消回复