您的位置：首页 > Web前端 > JavaScript

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

2015-06-17 10:34 211 查看

来源：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>

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航