七牛javascript图片上传！
来源：互联网 发布：领英是什么软件 编辑：程序博客网 时间：2024/05/15 07:08
七牛图片上传
七牛图片上传在前端做操作时需要注意的流程：
- 首先需要调用本地图片库获取到图片
- 然后调用后台API，传给后台图片文件名称获取到七牛的dowloadUrl下载头部地址和uploadToken
- 调用七牛的upload方法，将图片上传到七牛服务器，返回来图片的正式下载地址
话不多说，直接贴代码看：
var IMG_LENGTH = 1;//图片最大1MBvar IMG_MAXCOUNT = 8;//最多选中图片张数var IMG_AJAXPATH = "http://up.qiniu.com";//异步传输服务端位置var UP_IMGCOUNT = 0;//上传图片张数记录//打开文件选择对话框$("#div_imgfile").click(function () { if ($(".lookimg").length >= IMG_MAXCOUNT) { alert("一次最多上传" + IMG_MAXCOUNT + "张图片"); return; } var _CRE_FILE = document.createElement("input"); if ($(".imgfile").length <= $(".lookimg").length) {//个数不足则新创建对象 _CRE_FILE.setAttribute("type", "file"); _CRE_FILE.setAttribute("class", "imgfile"); _CRE_FILE.setAttribute("accept", ".png,.jpg,.jpeg"); _CRE_FILE.setAttribute("num", UP_IMGCOUNT);//记录此对象对应的编号 $("#div_imgfile").after(_CRE_FILE); } else { //否则获取最后未使用对象 _CRE_FILE = $(".imgfile").eq(0).get(0); } return $(_CRE_FILE).click();//打开对象选择框});//创建预览图，在动态创建的file元素onchange事件中处理// $(".imgfile").on("change", function () {$(document).on("change",".imgfile",function () { if ($(this).val().length > 0) {//判断是否有选中图片 //判断图片格式是否正确 var FORMAT = $(this).val().substr($(this).val().length - 3, 3); if (FORMAT != "png" && FORMAT != "jpg" && FORMAT != "peg" && FORMAT != "PNG" && FORMAT != "JPG" && FORMAT != "PEG") { alert("文件格式不正确！！！"); return; } //判断图片是否过大，当前设置1MB var file = this.files[0];//获取file文件对象 if (file.size > (IMG_LENGTH * 1024 * 1024)) { alert("图片大小不能超过" + IMG_LENGTH + "MB"); $(this).val(""); return; } //判断图片是否过大，当前设置1MB var file = this.files[0];//获取file文件对象 if (file.size > (IMG_LENGTH * 1024 * 1024)) { alert("图片大小不能超过" + IMG_LENGTH + "MB"); $(this).val(""); return; } var Qiniu_UploadUrl = "http://up.qiniu.com"; var headerPicFile = "headerPicFile"; var headerPic = "headerPic"; var token = ""; var filekey =""; var dowloadUrl = ""; var Qiniu_upload = function(f, token, key,dowloadUrl) {//token,filekey,dowloadUrl var xhr = new XMLHttpRequest(); xhr.open('POST', Qiniu_UploadUrl, false); var formData, startDate; formData = new FormData(); if (key !== null && key !== undefined && key !=""){ formData.append('key', key) }; formData.append('token', token); formData.append('file', f); xhr.onreadystatechange = function(response) { console.log("file="+f); console.log("token="+token); console.log("key="+key); console.log("dowloadUrl="+dowloadUrl); console.log("status="+xhr.status); console.log("readyState="+xhr.readyState); if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") { var blkRet = JSON.parse(xhr.responseText); console.log(dowloadUrl+blkRet.key); //创建预览外层 var _prevdiv = document.createElement("div"); _prevdiv.setAttribute("class", "lookimg active"); //创建内层img对象 var preview = document.createElement("img"); $(preview).attr("data-url",dowloadUrl+blkRet.key); $(preview).attr("data-state",1); $(_prevdiv).append(preview); //创建背景框 var IMG_DELBTN = document.createElement("span"); IMG_DELBTN.setAttribute("class", "lookimg_bk"); $(_prevdiv).append(IMG_DELBTN); //创建删除按钮 var IMG_DELBTN = document.createElement("div"); IMG_DELBTN.setAttribute("class", "lookimg_delBtn"); //IMG_DELBTN.innerHTML = "<img src='images/icon/err.bg.png'/>"; $(_prevdiv).append(IMG_DELBTN); //创建进度条 // var IMG_PROGRESS = document.createElement("div"); // IMG_PROGRESS.setAttribute("class", "lookimg_progress"); // $(IMG_PROGRESS).append(document.createElement("div")); // $(_prevdiv).append(IMG_PROGRESS); //记录此对象对应编号 _prevdiv.setAttribute("num", $(this).attr("num")); //对象注入界面 //$("#div_imglook").children("div:last").before(_prevdiv); //$("#div_imglook").empty();//每次上传清空之前的图片 $("#div_imglook").append(_prevdiv); UP_IMGCOUNT++;//编号增长防重复 //预览功能 start var reader = new FileReader();//创建读取对象 reader.onloadend = function () { preview.src = reader.result;//读取加载，将图片编码绑定到元素 } if (file) {//如果对象正确 reader.readAsDataURL(file);//获取图片编码 } else { preview.src = "";//返回空值 } //预览功能 end } else if (xhr.status != 200 && xhr.responseText) { alert("上传失败!"); } }; startDate = new Date().getTime(); $("#progressbar").show(); xhr.send(formData); console.log(formData); }; filekey = file.name+"_"+new Date().getTime(); //请求后台接口获取上传token和上传地址 $.ajax({ type: "POST", url:"http://devapi.qiyuyd.com/upload/getUploadToken", headers: { "Content-Type":"application/x-www-form-urlencoded" }, data:"fileName="+filekey, dataType: 'JSONP', jsonp: 'callbackFunName', //ContentDisposition:"form-data; name='text'" , //ContentType:"application/json;charset=utf-8", //contentLength:0, async : false, success: function (data) { if(data.code==0){ console.log(data); token = data.data.uploadToken; dowloadUrl = data.data.dowloadUrl; //console.log(filekey); if(filekey.indexOf(dowloadUrl)>=0){ // if(filekey.indexOf(dowloadUrl)>=0){ // filekey = filekey.substring(dowloadUrl.length); // } } //Qiniu_upload(token,filekey,dowloadUrl); if ($(".imgfile")[0].files.length > 0 && token != "") { // uploadstatus(2,"正在上传",5,headerPicFile); Qiniu_upload($(".imgfile")[0].files[0], token, filekey,dowloadUrl); } else { // uploadstatus(3,"请选择文件",3,headerPicFile); console && console.log("form input error"); } }else{ alert("获取上传Token失败"); } }, error: function (error) { //服务器连接失败报错处理 // alert("error"); console.log('错误'); console.log(error.responseText); } }); }});//删除选中图片$(document).on("click",".lookimg_delBtn",function () { // $(".lookimg_delBtn").on("click", function () { $(".imgfile[num=" + $(this).parent().attr("num") + "]").remove();//移除图片file $(this).parent().remove();//移除图片显示});////删除按钮移入移出效果//$(".lookimg").live("mouseover", function () {// if ($(this).attr("ISUP") != "1")// $(this).children(".lookimg_delBtn").eq(0).css("display", "block");;//});//$(".lookimg").live("mouseout", function () {// $(this).children(".lookimg_delBtn").eq(0).css("display", "none");;//});//确定上传按钮$("#btn_ImgUpStart").click(function () { if ($(".lookimg").length <= 0) { alert("还未选择需要上传的图片"); return; } //全部图片上传完毕限制 if ($(".lookimg[ISUP=1]").length == $(".lookimg").length) { alert("图片已全部上传完毕！"); return; } //循环所有已存在的图片对象，准备上传 for (var i = 0; i < $(".lookimg").length; i++) { var NOWLOOK = $(".lookimg").eq(i);//当前操作的图片预览对象 NOWLOOK.index = i; //如果当前图片已经上传，则不再重复上传 if (NOWLOOK.attr("ISUP") == "1") continue; //上传图片准备 var IMG_BASE = NOWLOOK.children("img").eq(0).attr("src"); //要上传的图片的base64编码 var IMG_IND = NOWLOOK.attr("num"); var IMG_ROUTE = $(".imgfile[num=" + IMG_IND + "]").eq(0).val();//获取上传图片路径，为获取图片类型使用 var IMG_ENDFOUR = IMG_ROUTE.substr(IMG_ROUTE.length - 4, 4);//截取路径后四位，判断图片类型 var IMG_FOMATE = "jpeg"; //图片类型*** if (IMG_ENDFOUR.trim() == ".jpg") IMG_FOMATE = "jpg"; else if (IMG_ENDFOUR.trim() == ".png") IMG_FOMATE = "png"; }});上面的代码注释写的很详细，虽然没有精简代码。但是可以自定义编辑，给上传插件添加更多内容。
我在里面添加了图片删除按钮，可以将图片移除。对上传的图片也做了数量和大小的限制，同时也可以改变图片的格式。顺便贴上html的图片：
阅读全文
0 0
- 七牛javascript图片上传！
- 七牛上传图片（javascript）
- 七牛图片上传
- HTML 七牛上传图片
- 七牛上传文件 图片
- IOS七牛上传图片
- 七牛上传图片视频
- Laravel 图片七牛上传
- javscript 七牛上传图片
- 七牛客户端上传图片文件
- 七牛-base64上传图片(java)
- 七牛-base64图片上传（python）
- 七牛图片上传的使用心得
- Yii 使用七牛上传图片
- lrz压缩图片，上传七牛
- laravel使用七牛组件上传图片
- 七牛上传图片 使用线程
- 七牛---JavaScript多按钮上传
- C语言单向链表的实现
- POJ
- Jmeter的beanshell应该怎么写？
- 一个程序理解java二叉树-创建、递归非递归便利、获取路径
- 设计模式-建造者模式-builder-python
- 七牛javascript图片上传！
- 2015-2016 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2015) Disastrous Downtime(前缀和)
- JQuery提示框tips插件：jquery.contip.js
- MySQL数据库 SQL语句 笔记
- C++primer 阅读笔记----------语句
- 设计模式六大原则之单一职责原则
- ARM电源电路如何消除电磁干扰？
- 时间格式的转换
- ajax :分页无刷新
