图片上传功能
html结构：
在html中input的type=file就可以实现文件的上传功能，在其属性中也包含一个accept=‘’；可以限制文件的类型，但是在chrom浏览器中会产生很大的延时，页面给人的感觉非常卡顿，因此最好在js代码中对文件进行类型判断。input也可以设置属性multiple=“multiple”实现多个文件的上传。在上述的代码中，我将input[type=file]的透明度设置成了0 ，在用了相对定位relative和z-index的样式，使用一个图片来模仿添加图片上传的按钮。这次的项目中我们主要是h5页的上传图片，因此没有添加多个文件上传的功能，也没有使用ajaxfileupload的插件，就自己动手写了一个功能，主要用到formData类型的变量，将file对象存入其中，然后传到后台的接口，在从后台的接口获取返回的图片在图床的链接信息。主要的js代码如下：
js代码：
//上传图片预览效果
function ImgPreview(srcImg){
var preview=$('#preview_wrap');
var result='
 ';
preview.append(result);
}
$('#preview_wrap').on('click','.del_Img',function(){
$(this).parent('div').remove();
});
$('#uploadIMG').on('change',function(){
var len=$('.preview').length;
var picsdata=$('#uploadIMG').val();
if(len>2){
jsAlert('最多可以上传3张照片！');
close();
}else{
var _file=document.getElementById("uploadIMG");
var i=_file.value.lastIndexOf('.');
var len=_file.value.length;
var extEndName=_file.value.substring(i+1,len);
var extName="GIF,BMP,JPG,JPEG,PNG";//首先对格式进行验证
if(extName.indexOf(extEndName.toUpperCase())==-1){
jsAlert("请您上传图片");
close();
}else{
console.log(extEndName);
var picFormData = new FormData();
var picdata=this.files[0];
picFormData.append("pic", picdata);
console.log(picFormData);
$.ajax({
type:'POST',
data:picFormData,
contentType:false,
processData:false,
cache:false,
url:'http:///feedback/upimg',
success:function(res){
if(res.data.errno==0){
var srcImg=res.data.errmsg;
ImgPreview(srcImg);}
}
});
}
}
});
首先对于图片上传来说，使用ajax只能通过post请求上传图片，不能通过get请求，因此对于ajax的跨域问题，就不能使用jsonp的方法来解决，因为jsonp只支持get请求。本人也是折腾半天才通过百度的方法找到了原因。理论的知识需要通过实践来验证才能理解的更加透彻。此外对于ajax发送formData类型的数据，需要设置几个必要的参数：
contentType:false,//内容类型设置为false，告诉后台为formData类型
processData:false,//因为是formData类型的参数所以不需要处理
cache:false,//图片不需要缓存
对于预览的实现很简单，就是追加一层div，修改其中的img的src属性，因为本地预览对于h5的页面手机端有bug，具体什么bug我也没有试验，同事说图片预览还是需要接口返回的链接地址比较靠谱。以上就是我的一个小功能的实现，也是花了不少天，在小慧姐的帮忙下才完成的，真的很感谢啊，出入职场的小白，希望早日能成为一名牛b的程序猿，有颜值也有实力哈哈哈！
文尾寄语
这是我第一使用markdown编辑文本，真的很棒哦，很赞。也是出入工作的第一篇技术日志，和自己的工作有关，希望以后的生活能顺顺利利，技术能更上一层楼，有喜欢前端的小伙伴们可以一起相互学习，本人还是渣渣，还需要大牛们多多来指导指导！
马上要毕业了，时间好快，不知道未来的路会是鲜花和掌声还是满地荆棘，无论如何我都会微笑面对，新的生活就此要拉开帷幕了！期待！激动！
