首页 > 七牛上传图片

七牛上传图片

我使用七牛是因为我懒得管理图片,也懒得处理图片缩放之类的东西。

最主要的,感觉用七牛逼格比较高。

傻瓜式的顺序:注册七牛账号->实名认证->充值10块钱->开始使用

这时候你去个人中心->密钥管理,可以看到AK和SK两个值,这两个值是七牛确认是谁在上传图片,也就是确认身份用的,所以千万不要给心怀不轨的人看到。

图片上传应该都需要以下几件事:

1.用户选择想要上传的图片

2.预览图片

3.上传图片

4.提交表单

5.后台确认表单提交成功,将已上传的图片标记为永存。

上传图片是指把图片上传到七牛,提交表单是把图片地址保存到数据库,这样可以给自己的网站省很大一部分带宽

可能是我没有深入的了解七牛上传图片的机制,我发现七牛并不能先暂时缓存图片,然后提交表单以后再确认保存。

因此我自己用了一个笨方法,创建两个空间,一个空间用来缓存,另一个空间用做真正的保存。

具体的步骤是:

1.用户选择图片

2.预览图片

3.用户点击提交表单

4.上传图片(把图片上传到缓存空间,并标记缓存一天)

5.上传成功后提交表单

6.后台将缓存中的图片复制一份到真正的空间中,复制成功后删除缓存图片(不用管是否删除成功,大不了缓存一天)

根据步骤, 一点一点来,完成前三步需要后端提供一个七牛生成的token,还有前端的plupload方法

首先是后台如何生成七牛token?

我不告诉你,自己去看文档吧,我觉得这个很简单,但是记住了,给前端生成的token要标注缓存1天,也就是24小时以后要删除。

然后是前端的代码

你去看看七牛对JavaScript的文档,然后我给你一个函数,看不懂留言

 

[javascript] view plaincopy
  1. /*设置Qiniu.uploader对象参数*/  
  2. function setOption(parent, button, last, token){  
  3.     return {  
  4.         runtimes: 'html5,flash,html4',    //上传模式,依次退化  
  5.         container: parent,           //上传区域DOM ID,默认是browser_button的父元素,  
  6.         drop_element: parent,        //拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传  
  7.         browse_button: button,       //上传选择的点选按钮,**必需**  
  8.         uptoken_url: '/web/qiniu/getsdk',            //Ajax请求upToken的Url,**强烈建议设置**(服务端提供)  
  9.         uptoken : token, //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成  
  10.         // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`,则开启,SDK会忽略对key的处理  
  11.         domain: 'http://ofc0yhzbv.bkt.clouddn.com/',   //bucket 域名,下载资源时用到,**必需**  
  12.         get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的token  
  13.         max_file_size: '10mb',           //最大文件体积限制  
  14.         flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相 对路径  
  15.         max_retries: 3,                   //上传失败最大重试次数  
  16.         dragdrop: true,                   //开启可拖曳上传  
  17.         chunk_size: '10mb',                //分块上传时,每片的体积  
  18.         auto_start: false,                 //选择文件后自动上传,若关闭需要自己绑定事件触发上传  
  19.         unique_names: true,      //设置所有文件名唯一  
  20.         filters: {  
  21.             mime_types : [ //只允许上传图片  
  22.                 { title : "Image files", extensions : "jpg,jpeg,gif,png" },  
  23.             ],  
  24.             prevent_duplicates : false //不允许选取重复文件  
  25.         },  
  26.         deleteAfterDays:'',  
  27.         init: {  
  28.             'FilesAdded': function(up, files) {  
  29.                 // 设置预览图地址  
  30.                 var img = new o.Image();  
  31.                 img.onload = function (){  
  32.                     $("#" + button).attr('src', this.getAsDataURL());  
  33.                 }  
  34.                 img.load(files[0].getSource());  
  35.                 // 开始上传按钮  
  36.                 $("#" + button + "_start").click(function(){ up.start(); });  
  37.                 plupload.each(files, function(file) {  
  38.                     // 如果上传文件大于1 ps:第一个文件上传的时候用户选择第二个文件  
  39.                     // 这时队列大于1,队列的第一个文件是正在上传的,第二个是新选的  
  40.                     if (up.files.length > 1) {  
  41.                         // 移除当前队列里第一个文件  
  42.                         up.removeFile(up.files[0]);  
  43.                     }  
  44.                     // 全局变量 根据变量控制不让表单提前提交  
  45.                     imgloading = true;  
  46.                     // 文件添加进队列后,处理相关的事情  
  47.                 });  
  48.             },  
  49.             'BeforeUpload': function(up, file) {  
  50.                 // 每个文件上传前,处理相关的事情  
  51.                 $("#" + button + "_uploading").click(function () {  
  52.                     up.stop();  
  53.                     $("#" + button + "_uploading").fadeOut();  
  54.                 });  
  55.             },  
  56.             'UploadProgress': function(up, file) {  
  57.                 if($("#" + button + "_uploading").length < 1){  
  58.                     return;  
  59.                 }  
  60.                 $("#" + button + "_uploading").show();  
  61.                 $("#" + button + "_uploading").html(up.total.percent + "%(点击取消)");  
  62.                    // 每个文件上传时,处理相关的事情  
  63.             },  
  64.             'FileUploaded': function(up, file, info) {  
  65.                 var domain = up.getOption('domain');  
  66.                 var res = $.parseJSON(info);  
  67.                 var sourceLink = domain + res.key; //获取上传成功后的文件的Url  
  68.                 // 设置图片名称  
  69.                 $("#" + button + "_input").val(res.key);  
  70.                 // 进度更新为上传完成  
  71.                 $("#" + button + "_uploading").html("上传完成");  
  72.                 $("#" + button + "_uploading").unbind();  
  73.                 // 图片上传后执行事件  
  74.                 // eval(last+"()");  
  75.                 last();  
  76.             },  
  77.             'Error': function(up, err, errTip) {  
  78.                 alert("目前只支持图片格式:jpg,jpeg,gif,png");  
  79.                    //上传出错时,处理相关的事情  
  80.             },  
  81.             'UploadComplete': function() {  
  82.                    //队列文件处理完毕后,处理相关的事情  
  83.             },  
  84.         }  
  85.     };  
  86. }  



通过这个函数,可以点击图片选择图片,然后预览,上传,上传成功后提交表单

 

提交表单以后,事情就简单多了,后台转存图片,然后删除缓存图片,bingo。

图片上传就搞定了,如果大家想做异步上传,也可以,不过如果做异步上传的话。。。是会有问题的,具体什么问题,有心人可以来问我。

作者:http://blog.csdn.net/shuzipai/article/details/52874383

转载于:https://www.cnblogs.com/duyanming/p/6841966.html

更多相关:

  • 第一节 基于Struts 2完成文件上传 Struts 2框架中没有提供文件上传,而是通过Common-FileUpload框架或COS框架来实现的,Struts 2在原有上传框架的基础上进行了进一步封装,从而大大简化了文件上传的开发应用。 1.1 下载并安装Common-FileUpload框架   1.2 配置上传解析器 1.3...

  • 在经受一天的磨难之后终于找到处理事件方法: 先引用: