c ajax 上传图片插件,ajax实现图片上传和预览

喜欢ヅ旅行 2022-09-03 07:21 230阅读 0赞

图片上传功能

html结构：

!\[\](6f4fbfb7/addimg.png)

在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='

!\[\]('+srcImg+')

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编辑文本，真的很棒哦，很赞。也是出入工作的第一篇技术日志，和自己的工作有关，希望以后的生活能顺顺利利，技术能更上一层楼，有喜欢前端的小伙伴们可以一起相互学习，本人还是渣渣，还需要大牛们多多来指导指导！

马上要毕业了，时间好快，不知道未来的路会是鲜花和掌声还是满地荆棘，无论如何我都会微笑面对，新的生活就此要拉开帷幕了！期待！激动！