cjhupload一个简单异步文件上传插件(html5+js)

来源：互联网发布：用js显示时间编辑：程序博客网时间：2024/06/04 19:28

来源：http://www.myopenresources.com/page/resource_detail_0.html?rid=370

更多文章请查看本人博客网站：http://www.myopenresources.com

cjhupload是一个本人基于原生JS编写的一个文件上传插件，支持手机、电脑端，你可查看例子，或下载详细例子（请到下面的“下载地址”下载）。

例子：

<!DOCTYPE HTML>
<html lang='zh'>
<head>
<meta charset="utf-8">
<meta name="author" content="ISUX">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>demo</title>


<script src="jquery.min.js"></script>


<script src="fileupload/cjhupload-zh.js"></script>


<script src="fileupload/cjhupload.js"></script>

<script type="text/javascript">

//检查文件类型
function checkFileType(file,fileName){
var regExp =new RegExp("^.*?\.(jpg|jpeg|png)$");
if(!regExp.test(fileName)){
return false;
}else{
return true;
}
}

//文件上传
function uploadImg(){
var tempList=new Array();
for(var i=0;i<fileList.length;i++){
tempList.push(fileList[i].file);
}

var cjhUpload = new CJHUpload({
url:'../index/upload.jhtml',//文件上传地址
fileList:tempList,
onSuccess:function(file, responseText){
alert(responseText);
},
onCheckAllFileType:function(file,fileName){
return checkFileType(file,fileName);
}
});

cjhUpload.sendFormData();
}

//读取图片
var fileId=1;
var fileList = new Array();
function readFile(obj){
if (obj.files && obj.files[0]){
if(!checkFileType(obj.files[0],obj.files[0].name)){
$.tips({
content:'上传的文件类型不正确！',
stayTime:1500,
type:"warn"
})
}else{


var fileObject=new Object();
fileObject.file=obj.files[0];
fileObject.id=fileId;
fileList.push(fileObject);

var reader = new FileReader();
reader.onload = function(evt){
var liId="liImgId"+fileId;
$('#imgViews').append('<li id="'+liId+'" onclick="viewAddImg(\''+fileId+'\',\''+(evt.target.result)+'\');"><img src="'+(evt.target.result)+'"/></li>');
var lisLen=$('#imgViews >li').length;
$("#imgViews").append($("#imgViews >li").eq(lisLen-2).remove());
}
reader.readAsDataURL(obj.files[0]);

reader.onloadend=function(){
fileId++;
}

}
}
}

//提交表单
function submitData(){

uploadImg();
}

</script>
<style>
li {
list-style: none; }
.ui-grid-trisect>li {
width: 25%;
float: left;
position: relative;
-webkit-box-sizing: border-box;
text-align: center;
}

.ui-grid-trisect li img {
width: 5.9em;
height: 5.9em;
border: 0.1em solid #e1e1e1;
}

.uwh-bg {
-webkit-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url('add-img.png');
width: 100%;
height: 100%;
cursor: pointer;
}

.uwh-bg input {
width: 5.9em;
height: 5.9em;
filter: alpha(opacity = 0);
opacity: 0;
}

.btn-content {
width: 100%;
height: 10em;
}

.btn-content div {
width: 90%;
height: 2.5em;
margin-left: auto;
margin-right: auto;
line-height: 2.5em;
text-align: center;
font-size: 1.3em;
color: #ffffff;
background-color: orange;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
}
</style>
<body>

<div class="btn-content" style="margin-top: 2.5em;height: 5em">
<div onclick="submitData();" style="margin-top: 1.1em">
提交
</div>
</div>


<div style="margin-top: 0.5em">
<ul class="ui-grid-trisect" style="padding-left: 1.55%;padding-right:1.55%;text-align: center;" id="imgViews">
<li class="uwh-bg" id="addImgBtn" style="padding: 0.05em;width:6.0em;height:6.0em">
<input type="file" onchange="readFile(this);"/>
</li>

</ul>
</div>

</body>
</html>

效果：

1 0