Js上传文件-异步自定义上传

Js上传文件，从最初的使用别人的上传框架，到自己写的基本上传工具，只有在无数次的经历中才能慢慢学会更深的知识，今天给朋友们分享一下Js异步上传文件的方式，很简单，先上代码，如有不屑的朋友互喷，你我皆是求学者，实在忍不住在留言中给点意见，谢谢。

首先创建一个文件：file.js

var File = {

    loadFileForm:function(Param,Success,Error){
        window.onload = function(){
            var fileId = "file";
            if(Param.file != null){
                fileId = Param.file;
            }
            var eleFile = document.querySelector('#'+fileId);
            //eleFile.multiple 是否上传多个文件
            if(Param.count == null){
                eleFile.multiple = false;
            }
            if(Param.count == 1){
                eleFile.multiple = false; 
            }
            eleFile.addEventListener('change', function (event) {
                var fileArr = event.target.files;
                if(fileArr != null){
                    //大小验证
                    if(Param.size != null){
                        for(var filel in fileArr){
                            //文件大小转为M
                            if(((fileArr[filel]["size"]/1024)/1024) > Param.size){
                                Error("单个文件的大小不能超过："+Param.size+"M");
                                return;
                            }
                        }
                    }else{
                        for(var filel in fileArr){
                            if(((fileArr[filel]["size"]/1024)/1024) > 300){
                                Error("单个文件的大小不能超过：300M");
                                return;
                            }
                        }
                    }
                    
                    //上传数量
                    if(Param.count != null){
                        if(fileArr.length > Param.count){
                            Error("文件上传数量超出上传限制："+Param.count+"个");
                            return;
                        }
                    }
                    var form = new FormData(); // 转为 FormData 对象
                    for(var i=0;i<fileArr.length;i++){
                        var index = fileArr[i]["name"].lastIndexOf(".");  
                        var fileType = fileArr[i]["name"].substring(index+1,fileArr[i]["name"].length);
                        var isExt = false;
                        if(Param.ext != null){
                            //验证上传格式是否存在
                            //Param.ext = "jpg,png,xsl";
                            var arr = (Param.ext).split(',');
                            for(var m in arr){
                                if(fileType == arr[m]){
                                    isExt = true;
                                    break;
                                }
                            }
                            
                            if(isExt){
                                if(Success != null){
                                    form.append("file", fileArr[i]); // 文件对象
                                    //是否设置宽高
                                    if(Param.width != null && Param.height != null){
                                        form.append("swidth", Param.width);
                                        form.append("sheight", Param.height);
                                    }
                                    Success(form,fileArr[i]["name"],fileType);
                                }
                            }else{
                                Error("上传文件类型不支持："+fileType+"格式");
                            }
                        }else{
                            if(Success != null){
                                form.append("file", fileArr[i]); // 文件对象
                                Success(form,fileArr[i]["name"],fileType);
                            }
                        }
                    }
                }else{
                    Error("文件为空！");
                }
            });
        }    
    }

}

<html>
<head>
<style>
.loadingfile {
	font-size:14px;
	position: relative;
    display: inline-block;
    background: #337AB7;
    border: 0px solid #99D3F5;
    border-radius: 3px;
    padding: 6px 12px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    text-indent: 0;
    line-height: 22px;
    cursor: pointer;
}
.loadingfile input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.loadingfile:hover {
    background: #2C6A9E;
    border-color: #fff;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
</style>
</head>
<body>
<a href="javascript:;" class="loadingfile btn fl w100">
	上传文件<input type="file" value="" multiple="multiple" id="files">
</a>
</body>
//html文件的js引用
<script>
File.loadFileForm(
	{
		file:"files",  //上传input控件的id
		count:1, //上传数量
		size:500,//大小：M
		ext:"xlsx,xls,jpg,jpeg,gif,mp4",
	},
	function(form,fileName,fileType){
        //form 上传数据
        //fileName 文件原始名称 
        //fileType 上传的类型
		$.ajax({
			url: "/upload.php", //上传地址
			type: "POST",
		    dataType:"json",
            beforeSend:function(){
            	//上传开始
            },
            complete:function(){
            	//上传完成
            },
            data: form,
			contentType: false,
		    processData: false,
		    cache: false,
			success: function(data){
				//处理返回的参数，返回参数自定义
				
			}
		});
	},
	function(error){
		console.log(error);
	}	
);
</script>
</html>

这是一个简单的异步上传，为了方便，上传我使用jQuery的ajax处理，后面我对这个上传工具新增了二进制流上传、base64位上传、图片压缩、图片变色、视频变色（黑白，反色，压缩）等处理上传。如有需要可直接下载源码，三人行必有我师，有更好的建议可以反馈给我，谢谢。

下载地址，在我的资源内可以找到“js异步上传，js图片压缩、变色”

Js上传文件-异步自定义上传

猜你喜欢