实例讲解H5移动开发Ajax上传多张Base64格式图片到服务器


本文摘自PHP中文网,作者小云云,侵删。

本文主要为大家详细介绍了H5移动开发Ajax上传多张Base64格式图片到服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

废话不多说,直接看代码吧

1、上传组件


1

2

3

4

<p class="imgbox">

  <img class="goodsimg" src="../../assets/addimg.png">

  <input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>

</p>

2、展示添加上的图片


1

2

3

4

5

6

7

8

9

10

11

12

13

14

viewimg($event) {

   //获取当前的input标签

   var currentObj = event.currentTarget;

   //找到要预览的图片img标签,亦可动态生成

   var img = currentObj.parentNode.children[0];

   setImagePreview(currentObj, img);

 

   function setImagePreview(docObj, imgObjPreview) {

     if (docObj.files && docObj.files[0]) {

        imgObjPreview.style.display = 'block';

        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

    }

  }

}

3、获取图片并上传到服务器


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

//单张图片上传

var inputs = $("input.fileupload");

for (var i = 0; i < inputs.length; i++) {

  //图片转base64上传

  var file = inputs[i].files;

  if (file[0]) {

    var reader = new FileReader();

    reader.readAsDataURL(file[0]);

    reader.onload = function(e) {

   var event = this;

   console.log(event.result);

      $.ajax({

        type: 'POST',

        url: 'http://10.145.0.05/goods/addGoodsBase64',

        dataType: "json",

        data: {

          "base64": event.result,

        },

        success: function(data) {

          console.log(data);

        }

      });

    }

  }

}

好了,就是这个过程,接下来的就交给后端的同学处理了。

相关推荐:

h5里js和servlet实现文件上传的实现步骤

H5里的postMessage API图文详解 详细介绍

关于h5中新增的几个背景属性和文本属性

以上就是实例讲解H5移动开发Ajax上传多张Base64格式图片到服务器的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

断点续传原理是什么?怎么利用HTML5实现文件断点续传

HTML5中的canvas 和 svg分别是什么?它们的区别在何处?(实例)

几个很好用的HTML5移动开发框架

用h5的canvas做出弹幕效果

h5新标签浏览器的兼容问题

几个解决兼容ie6\7\8不支持HTML5标签的几个方法

HTML5中submit是按钮么

h5语义标签实际案例

HTML5单页面手势滑屏切换如何实现

如何设置h5的表单验证失败提示语

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...