版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hch15112345824/article/details/78547190
1. 原来的官方文档是先选择文件,再点击上传按钮,上传文件,我这里是选择完文件,就上传,这里主要是在FilesAdded这个里面添加完文件,立刻初始化一次set_upload_param(uploader, '', true); 就能选择完就上传了.
2.这个只是个简单的图片上传,没有用到<input>这个属性来选择文件,,好像用 plupload 里面的属性 browse_button 来选择文件的,我同事用其他插件来上传文件,
这里有个坑,就是你那个<input name="file">,就是你的选择文件的input的name属性必须是file,否者会出现IncorrectNumberOfFilesInPOSTRequest 错误,好坑.
3. 这个地址是阿里云源码来的,AppPostPolicyServer是签名的java项目,ss-h5-upload-js-php文件夹里面是前端直传,具体自己下载看看或者去官方下载也可以.我就是
根据这两个文件夹的东西来修该出我下面的代码的.其他就需要你看官方文档了.
http://download.csdn.net/download/hch15112345824/10121664
这个是我文件上传的最后想要的效果图,点击上传图片,选择完图片,直接文件上传到阿里云,然后显示URL,图片的地方也显示上传的图片.
jsp的代码如下:
<!-- 阿里云上传 -->
<div id="container" class="dl-horizontal form-group">
<a id="selectfiles" href="javascript:void(0);" class="btn btn-circle btn-success" data-style="expand-left" data-spinner-color="#333">上传图片</a>
<a id="postfiles" href="javascript:void(0);"></a>
</div>
<!-- 这个显示进度的 -->
<div id="ossfile"></div>
</div> js的代码如下:
// id.
accessid = ''
// 秘钥.
accesskey = ''
// host: 指的是用户要往哪个域名发往上传请求 host+文件名就是下载路径了.
host = ''
// policy：指的是用户表单上传的策略policy，是经过base64编码过的字符串.
// 加密.
policyBase64 = ''
// signature：是对上述第三个变量policy签名后的字符串.
signature = ''
// 返回的body.
callbackbody = ''
// 文件的名字.
filename = ''
key = ''
// 过期时间.
expire = 0
// 文件名字.
g_object_name = ''
// 文件类型. local_name
g_object_name_type = 'random_name'
now = timestamp = Date.parse(new Date()) / 1000;
// 这个是获取accessid policy signature dir host expire.
function send_request()
{
var xmlhttp = null;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
serverUrl = ctx + '/aliyun/getPolicy';
xmlhttp.open( "GET", serverUrl, false );
xmlhttp.send( null );
return xmlhttp.responseText;
}
else
{
alert("您的浏览器不支持XMLHTTP,请换浏览器登录再使用.");
}
};
function get_signature()
{
// 可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲.
now = timestamp = Date.parse(new Date()) / 1000;
if (expire < now + 3)
{
body = send_request()
var obj = eval ("(" + body + ")");
host = obj['host']
policyBase64 = obj['policy']
accessid = obj['accessid']
signature = obj['signature']
expire = parseInt(obj['expire'])
callbackbody = obj['callback']
key = obj['dir']
return true;
}
return false;
};
// 截取文件的后缀.
function get_suffix(filename) {
pos = filename.lastIndexOf('.')
suffix = ''
if (pos != -1) {
suffix = filename.substring(pos)
}
return suffix;
}
// 上传的时候文件保存路径和名称:我这里是 文件夹+uuid+文件后缀.
function calculate_object_name(filename)
{
if (g_object_name_type == 'local_name')
{
g_object_name += "${filename}"
}
else if (g_object_name_type == 'random_name')
{
var uuid = generateUUID();
suffix = get_suffix(filename);
g_object_name = key + uuid + suffix;
}
return ''
}
//初始化一些参数.
function set_upload_param(up, filename, ret)
{
if (ret == false)
{
ret = get_signature()
}
g_object_name = key;
if (filename != '') {
suffix = get_suffix(filename)
calculate_object_name(filename)
}
new_multipart_params = {
'key' : g_object_name,
'policy': policyBase64,
'OSSAccessKeyId': accessid,
'success_action_status' : '200', // 让服务端返回200,不然，默认会返回204.
'callback' : callbackbody,
'signature': signature,
};
up.setOption({
'url': host,
'multipart_params': new_multipart_params
});
up.start();
}
// 这里是官方原来的文档代码,集体如下.
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'selectfiles',
container: document.getElementById('container'),
flash_swf_url : 'static/aliyunUpload/Moxie.swf',
silverlight_xap_url : 'static/aliyunUpload/Moxie.xap',
url : 'http://oss.aliyuncs.com',
multi_selection : false,
filters: {
mime_types : [ // 只允许上传图片和zip,rar文件.
{ title : "Image files", extensions : "jpg,gif,png,bmp" }
],
max_file_size : '10mb', // 最大只能上传10mb的文件.
prevent_duplicates : true // 不允许选取重复文件.
},
init: {
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>'
+'<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
+'</div>';
});
set_upload_param(uploader, '', true);
},
BeforeUpload: function(up, file) {
set_upload_param(up, file.name, false);
},
UploadProgress: function(up, file) {
var d = document.getElementById(file.id);
d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
var prog = d.getElementsByTagName('div')[0];
var progBar = prog.getElementsByTagName('div')[0]
progBar.style.width= 2*file.percent+'px';
progBar.setAttribute('aria-valuenow', file.percent);
},
FileUploaded: function(up, file, info) {
uploader.removeFile(file);
var imgDir = host+g_object_name;
var title = file.name;
if (info.status == 200) {
$.ajax({
url: ctx + '/advertisement/aliUpload',
type:"post",
async: false,
data:{
"imgDir" : imgDir,
"productId" : productId,
"title" : title
},
dataType:"json",
success: function (data) {
if(data.isSuccess == '1'){
$("#imgDir").val(data.imgDir);
$("#imgView").attr('src', data.imgDir);
// 删除进度条信息.
$("div#"+file.id).remove();
}else{
alert("保存信息失败,请重新上传文件.");
delFileList();
}
},
error: function (data, textStatus) {
alert("上传失败,请检查网络之后重新上传.");
delFileList();
}
});
} else {
alert("上传失败,请检查网络之后重新上传.");
delFileList();
}
},
Error: function(up, err) {
if (err.code == -600) {
alert("选择的文件太大了,重新选择文件.");
}
else if (err.code == -601) {
alert("选择的文件后缀不对,重新选择文件.");
}
else if (err.code == -602) {
alert("这个文件已经上传过一遍了或者已存在上传队列面,请确认再上传.");
}
else
{
alert("上传出现错误,请稍后再试.");
console.log(err);
console.log(up);
}
delFileList();
}
}
});
// 出错删除上传队列重新上传.
function delFileList(){
document.getElementById('ossfile').innerHTML="";
uploader.splice(0,9999);
}
// 获取uuid.
function generateUUID() {
var d = new Date().getTime();
var uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = (d + Math.random()*16)%16 | 0;
d = Math.floor(d/16);
return (c=='x' ? r : (r&0x3|0x8)).toString(16);
});
return uuid;
};
uploader.init();