核心提示：前两个月在做公众页面的开发，有一个在微信自带浏览器内上传文件和图片的需求，在讨论了可行性分析之后，决定尝试实现一下这个功能。经过网上查阅，发现微信浏览器貌似限制了上传文件的功能，于是开始着手研究。发现...
前两个月在做公众页面的开发，有一个在微信自带浏览器内上传文件和图片的需求，在讨论了可行性分析之后，决定尝试实现一下这个功能。
经过网上查阅，发现微信浏览器貌似限制了上传文件的功能，于是开始着手研究。发现在其他浏览器上是可行的。
下面先开始图片部分:
首先我们需要有一个input来选择手机中的相册，其中input的属性accept定义的是接收图片的类型，属性multiple定义是否可以多选。
后来发现multiple属性在IOS中有效，在Android中无效。
html部分
<p class="upload_part">
<form id='uploadForm'>
<img id="pic" src="img/add_img.jpg">
<input id="upload" name="images" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" type="file" style='display:none' multiple />
<button type="button" id='uploadPicButton'>确定上传</button>
<button type="button" id='CancelButton'>取消</button>
</form>
<p class="show_img"></p>
</p>
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/>");
// 三分之一的宽度
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部分
<!-- 上传遮罩 -->
<p class="upload_part">
<!-- 表单部分 -->
<form enctype="multipart/form-data">
<!-- input file；类型 可一次传多个文件 -->
<input id='file_' style='display:none' name="files" type="file" accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,text/plain,application/pdf" multiple/>
<button type="button" id='uploadPicButton'>确定上传</button>
<button type="button" id='CancelButton'>取消</button>
</form>
<!-- 预览文件的列表 -->
<ul class="show_file_name">
</ul>
<img id="pic" src="img/add_img.jpg">
</p>
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 += `<li class='file_preview' style='color:#ffffff'>${e.currentTarget.files[i].name}</li>`
}
$('#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以上版本可以上传，其他手机暂未支持，原因还在探索。
草草总结，会慢慢更新。欢迎指点评论。
