c ajax 上传图片插件,ajax实现图片上传和预览
图片上传功能
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='
';
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编辑文本,真的很棒哦,很赞。也是出入工作的第一篇技术日志,和自己的工作有关,希望以后的生活能顺顺利利,技术能更上一层楼,有喜欢前端的小伙伴们可以一起相互学习,本人还是渣渣,还需要大牛们多多来指导指导!
马上要毕业了,时间好快,不知道未来的路会是鲜花和掌声还是满地荆棘,无论如何我都会微笑面对,新的生活就此要拉开帷幕了!期待!激动!
c ajax 上传图片插件,ajax实现图片上传和预览相关推荐
- ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
- html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
- 图片上传本地预览(回显)插件
图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看 请下载完整的js和css样式,以及Demo <html><title>文件上传</title>< ...
- html ie8上传图片,图片上传本地预览兼容ie8
工作中遇到的,总结下来了,图片上传本地预览限制图片最大为2M 图片上传本地预览 #preview1{width:260px;height:190px;border:1px solid #000;ove ...
- layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能
html代码 上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...
- XX健康:预约管理-套餐管理图片上传与预览Redis实现定时清理垃圾图片
1. 新增套餐 1.1 需求分析 套餐其实就是检查组的集合,例如有一个套餐为"入职体检套餐",这个体检套餐可以包括多个检查组:一般检查.血常规.尿常规.肝功三项等.所以在添加套餐时 ...
- MUI学习笔记之图片上传和预览
MUI学习笔记之图片上传和预览 源代码是从博客园下载 我一边学习,一边注释,力求理解 <head> <meta charset="UTF-8"> <m ...
- uni-app知识点整理(5)- 网络请求、数据缓存、图片上传和预览
目录 一.网络请求 1.1 发送get请求 二.数据缓存 2.1 uni.setStorage(OBJECT) 2.2 uni.setStorageSync(KEY,DATA) 2.3 uni.get ...
- alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- DevExpress控件使用系列--ASPxUploadControl(图片上传及预览)
1.控件功能 列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...
最新文章
- wangEditor 上传图片,回调函数 Cannot read properties of undefined
- 3的三个整数立方和有多少个解?全球40万台计算机助力,MIT研究登上PNAS
- linux on android分区,linux分区笔记
- sql多变量 双引号设置
- WebService入门详解
- html 缓存 js文件缓存吗,如何为css / js文件设置缓存
- HTML5 地理位置定位(HTML5 Geolocation)原理及应用 (调用GPS)
- ValueError: optimizer got an empty parameter list
- TCL嵌入式测试技术在Comware V7系统中的应用
- vivo S7e和华为nova8se 的区别 哪个好
- java注解和反射详解
- 物联网发展从开始到成型,需要经过哪几个阶段?
- 程序员年底如何升职加薪?这份涨薪指南来了!
- Leetcode 组合总和问题
- web _html_css_七大选择器
- Google Earth Engine(GEE)——通过NDBI计算雪山覆盖去除雪山阴影
- 计算机二级建议练多长时间,计算机二级复习建议
- 【花费9毛钱购买阿里云服务器搭建一个私有云盘-owncloud】
- 使用Kubeadm(v.1.17)部署k8s 环境
- spring bootJWT/JJWT JSON WEB TOKEN