js前端预览上传图片到七牛服务器，保存图片路径到数据库的方法

第一步,首先要引入moxie.js,plupload.js,qiniu.js这个三个js文件，也可以直接访问静态文件CDN。链接给上https://developer.qiniu.com/kodo/sdk/javascript

下面给代码：

var uploader = Qiniu.uploader({
runtimes: ‘html5,flash,html4’,
browse_button: ‘file’,//上传按钮的ID
max_file_size: ‘100mb’,//最大文件限制
uptoken_url: ‘getToken.do’, //Ajax请求upToken的Url，强烈建议设置（服务端提供）
/* uptoken_func:token,*/
dragdrop: false,
unique_names:true,
chunk_size: ‘4mb’,
/*
uptoken:token,
*/
domain: ”,//自己的七牛云存储空间域名
multi_selection: false,//是否允许同时选择多文件
//文件类型过滤，这里限制为图片类型
filters: {
mime_types : [
{title : “Image files”, extensions: “jpg,jpeg,gif,png”}
]
},
auto_start: true,
init: {
‘FilesAdded’: function(up, files) {
for (var i = 0; i < files.length; i++) {
showPreview (files[i]);
}
//do something
},
‘BeforeUpload’: function(up, file) {
//do something
},
‘UploadProgress’: function(up, file) {
//可以在这里控制上传进度的显示
//可参考七牛的例子
},
‘UploadComplete’: function() {
//do something
},
‘FileUploaded’: function(up, file, info) {
//每个文件上传成功后,处理相关的事情
//其中 info 是文件上传成功后，服务端返回的json
var domain = up.getOption(‘domain’);
var res = eval(‘(’ + info + ‘)’);
var sourceLink = domain + res.key;//获取上传文件的链接地址
$(“#icon”).val(sourceLink);

         },

     }
 });    

• 获取token的方式最好采用上面的url方式获取，从你的后台程序得到，值得注意的是，你的后台返回token的格式应该为｛“uptoken“:”…………”｝这样的json格式才会被七牛识别，不然一直401错误。

• auto_start: true,这个属性设置为true的话，在你浏览图片选定的时候就会自动上传服务器。

• FileUploaded:function(),这个方法里面写的是上传成功后七牛服务器返回的数据。我这里做的操作是把返回值拼接成图片链接地址，然后赋值给我的表单属性（po类的属性），提交时一块提交给后台，然后保存到数据库。

第二步，如果想在提交的时候预览图片的话，首先需要一个img标签，我这里给的id为img。代码：

‘FilesAdded’: function(up, files) {
for (var i = 0; i < files.length; i++) {
showPreview (files[i]);
}
//do something
},
function showPreview (file) {
var preloader = new mOxie.Image();
preloader.onload = function() {
$(“#img”).attr( “src”, preloader.getAsDataURL() );
};
preloader.load( file.getSource() );
}