微信图片上传控件+html,手机H5仿微信多图上传

手机H5网站上传图片是基本的一个功能，所以一般程序都会用到。思路基本如下

1.图片选择

2.图片缩略展示

3.图片详情展示

4.图片删除

5.图片上传

1.图片选择

html标签代码


图片展示的时候必须要将手机端的图片旋转角度，不然上传的图片就是90度的图片会影响图片的浏览

使用插件JavaScript-Load-Image可以将图片旋转和压缩大小

$(document).on("click",".btn_add",function () {

$('#input').trigger('click')

});

$(document).on("change","#input",function () {

var input = $(this)[0]; // input 控件

imagesChanged(input);

});

/**

* 添加图片回调

*/

function imagesChanged(input) {

var files = input.files;

// 假设 "listView" 是将要展示图片的 div

var listView = $("#listView");

for (var i = 0; i < files.length; i++) { //新添加的图片

var file = files[i];

imgFiles.push(file);

// Make sure `file.name` matches our extensions criteria

if ( !/\.(jpe?g|png|gif)$/i.test(file.name) ) {

continue;

}

var options = {

orientation: true,

maxWidth: 640,

}

loadImage(

file,

function (img) {

var base = img.toDataURL("image/jpeg");

var imgRow = getImageRow(base);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！