html文件直传到S3

主要实现:

html文件拖拽上传

文件上传到aws.s3

html文件拖拽上传

drop是html5的新特性,详情看W3SCHOOL介绍

可以通过元素监听drop事件,获取到拖动到容器中的文件对象数组

首先要先阻止document默认监听事件

$(document).on({
    dragleave:function(e){
        e.preventDefault();
    },
    drop:function(e){
        e.preventDefault();
    },
    dragenter:function(e){
        e.preventDefault();
    },
    dragover:function(e){
        e.preventDefault();
    }
});

之后监听文件放置容器的drop事件

 var dragContainer = $("#dropContainer")[0];
 dragContainer.addEventListener("drop",function(e){
    e.preventDefault(); //取消默认浏览器拖拽效果
    var fileList = e.dataTransfer.files; //获取文件对象
	var ImageList = {};
	if(fileList.length == 0){
	    console.log('no file added!');
	    return false;
	}
	//file filter
	for(var i = 0 , j = 0 ; i < fileList.length ; i++ ){
	    if(fileList[i].type.indexOf('image') === -1){
	        delete fileList[i];
	    }
	    else{
	        ImageList[j++] = fileList[i];
	    }
	}

	for(var key in ImageList){
	    if(ImageList[key].size/1024 > that.getLimitSize()){
	        delete ImageList[key];
	    }
	    else{
		    that.appendUploadQueue(ImageList[key]);
	    }
	}
	// that.appendUploadQueue(ImageList);
	},false);

首先同样是阻止默认事件的执行。

通过event.dataTransfer.files可以获取到通过前端拖拽到容器的文件对象数组

上面做了两个过滤,一个是文件类型非图片的过滤,一个是文件尺寸太大的过滤

通过数据处理塞选可用的文件。

appendUploadQueue是处理文件上传队列的方法

使用aws.s3需要了解的相关知识。

aws:Amazon Web Services

s3:aws的一种,全称叫Simple Storage Service

bucket:中文翻译叫存储桶。Amazon S3 存储桶名称在全球是唯一的(无论是在哪个 AWS 区域中创建存储桶)。在创建存储桶时指定名称。

region:地区。我大中华地区只有一个节点(cn-north-1)。节点列表

Access Key ID:相当于账号;

Secret Access Key:相当于密码;

key:很多地方都有key,大部分指的是文件名。。。。吧

常用于文件存储(应该是)

html文件直传用的是aws提供的javascriptSDK

首先需要设置当前的账号密码,也就是上面提到的Access Key ID和Secret Access Key

这里做了全局的配置

    AWS.config.update({
		accessKeyId: that.ACCESS_KEY_ID,
		secretAccessKey: that.SECRECT_ACCESS_KEY
	});
	AWS.config.region = that.REGION;

下面是上面提到的appendUploadQueue方法的实现

   var params = {
	    Key: that.getFullStorePath() +"/"+that.getTimeString()+file.name,
	    ContentType: file.type,
	    Body: file,
	    ACL:"public-read"
	};
    (new AWS.S3({params: {Bucket: that.BUCKET}})).upload(params, function (err, originData) {
	    // results.innerHTML = err ? 'ERROR!' : 'UPLOADED.';
		if(err){
			console.log(err);
			alert('上传出错');
		}
		else{
			if(that.settings.complete){
				var data = originData;
				data.Location = that.CDN_URL_PATH + data.Location.split("amazonaws.com.cn/")[1];
				that.settings.complete && that.settings.complete(data);
        		that.appendThumbnail(data);
			}
		}
	});

需要注意的是,文件同名是会覆盖掉之前的文件的,可以通过配置选项来实现可同名存在。

上面是通过加了时间字符串来做到文件名的唯一性。

Body是上传文件的主要内容。

ACL是文件上传之后的权限。这里是权限表

*用户在请求上传成功返回资源的Location报xml access denied一般是acl未设置正确。

*upload请求错误一般是s3服务器xml跨域未配置允许域和put请求