java微信html5上传图片代码,微信浏览器上传图片和文件功能实现（代码教程）

前两个月在做公众页面的开发，有一个在微信自带浏览器内上传文件和图片的需求，在讨论了可行性分析之后，决定尝试实现一下这个功能。

经过网上查阅，发现微信浏览器貌似限制了上传文件的功能，于是开始着手研究。发现在其他浏览器上是可行的。

下面先开始图片部分:

首先我们需要有一个input来选择手机中的相册，其中input的属性accept定义的是接收图片的类型，属性multiple定义是否可以多选。

后来发现multiple属性在IOS中有效，在Android中无效。

html部分

确定上传

取消

jq部分

接着我们需要点击input来选择获取图片路径，

// 点击图标触发input onchange事件

$('#pic').click(function(event) {

$("#upload").click();

$("#upload").on("change", function() {

preview_image();

});

});

这里有个需求，判断最大只能删除六张图片；

于是写成函数

// 选择多图加上预览函数

function preview_image() {

var total_file = document.getElementById("upload").files.length;

if (total_file > 6) {

alert('最多只六张哦');

} else {

for (var i = 0; i < total_file; i++) {

var img = $("");

// 三分之一的宽度

img.attr("style", "height:6.5rem;width:30%;padding:1.5%");

img.attr("src", URL.createObjectURL(event.target.files[i]));

$('#pic').hide();

// 渲染

$('.show_img').prepend(img);

}

}

}

用ajax上传，这里请求传值用了表单对象，

简单说一个请求中 表单对象 和 表单serialize()函数的区别，serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。而表单对象一般用于对input type="file"的请求操作，比如图片和文件的上传。

至此上传图片完成，在IOS和Android系统中都能正常调用。

// 开始上传

$('#uploadPicButton').click(function(event) {

var formData = new FormData($('#uploadForm')[0]);

// if (($('#pic').attr('src') == "img/add_img.jpg")) {

// alert('你还没有选择照片，请重新选择');

// } else {

// console.log($('#upload').val().split(';'));

console.log(formData)

// 改变按钮文本

$(this).css('background-color', 'gray');

$(this).html('正在上传....')

$.ajax({

url: '/xxxxxx/',

type: 'POST',

data: formData,

async: true,

cache: false,

contentType: false,

processData: false,

// 成功

success: function(data) {

if (data.status_code == 500) {

alert("添加群相册相片失败");

$('#uploadPicButton').html('上传失败，点击图片重新选择');

} else if (data.status_code == 400) {

alert('请选择正确的图片类型');

$('#uploadPicButton').html('请你点击图片重新选择');

} else {

// 成功提示出现 定时1500毫秒

$('.success_mask').show();

setTimeout(function() {

location.reload();

}, 1500)

}

}

});

});

下面开始文件部分的尝试；

html部分

确定上传

取消

jq部分

$('#pic').click(function(event) {

$('#file_').click();

$('#file_').on('change', function(e) {

var total_file = document.getElementById("file_").files.length;

if (total_file > 6) {

alert('最多只能上传6个文件哦');

} else {

var img = '';

for (var i = 0; i < total_file; i++) {

img += `

${e.currentTarget.files[i].name}`

}

$('#pic').hide();

$('.show_file_name').append(img);

var filelength = $('.show_file_name li');

console.log(filelength);

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

if (filelength.eq(i).html().slice(-3) == 'doc' || filelength.eq(i).html().slice(-3) == 'ocx') {

filelength.eq(i).css('background', '#124da9');

} else if (filelength.eq(i).html().slice(-3) == 'txt') {

filelength.eq(i).css('background', '#208820');

} else if (filelength.eq(i).html().slice(-3) == 'xls' || filelength.eq(i).html().slice(-3) == 'lsx') {

filelength.eq(i).css('background', '#f57629');

} else if (filelength.eq(i).html().slice(-3) == 'ptx' || filelength.eq(i).html().slice(-3) == 'ppt') {

filelength.eq(i).css('background', '#208820');

} else if (filelength.eq(i).html().slice(-3) == 'pdf') {

filelength.eq(i).css('background', 'rgba(255, 0, 0, 0.64)');

}

}

}

});

});

上传：

$('#uploadPicButton').click(function(event) {

var formData = new FormData($('form')[0]);

$(this).css('background-color', 'gray');

$(this).html('正在上传....')

$.ajax({

url: '/xxxxxx/',

type: 'POST',

data: formData,

async: true,

cache: false,

contentType: false,

processData: false,

success: function(data) {

if (data.status_code == 500) {

alert("添加群文件失败");

$('#uploadPicButton').html('上传失败，重新选择');

} else if (data.status_code == 400) {

alert('请选择正确的文件类型');

$('#uploadPicButton').html('请你点击重新选择');

} else {

$('.success_mask').show();

setTimeout(function() {

location.reload();

}, 1500)

}

}

});

});

实测部分Android手机可以上传，IOS11以上版本可以上传，其他手机暂未支持，原因还在探索。

草草总结，会慢慢更新。欢迎指点评论。