来源：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>
<!--jquery-->
<script src="jquery.min.js"></script>
<!--语言包-->
<script src="fileupload/cjhupload-zh.js"></script>
<!--core-->
<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>
<!-- btn -->
<div class="btn-content" style="margin-top: 2.5em;height: 5em">
<div onclick="submitData();" style="margin-top: 1.1em">
提交
</div>
</div>
<!-- upload img -->
<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>
效果：
