实例讲解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格式图片到服务器的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

ajax怎样实现网页异步更新

h5链接的使用

什么是 websocket?深入理解HTML5中websocket

HTML5实现动态视频背景

h5实现放大镜效果的代码

HTML5 canvas常用属性方法(介绍)

对tap事件和tap点透原理的分析

HTML5 footer标签怎么用?footer标签的用法实例

12个冷门的h5设计小技巧

让web app更快的HTML5最佳实践

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




打赏

取消

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

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

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

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

评论

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