全球化服务

0755-82326831

获取免费方案

全部

网站建设常识

网站建设常见问题

网站SEO常识

网站开发常识

域名空间常识

首页 > 网站建设常识 > cjhupload一个简略异步文件上传插件(html5+js)

cjhupload一个简略异步文件上传插件(html5+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>

本文来源于增长超人网站建设公司

一起聊聊您的项目?

联系我们

获取方案

贵公司的网址是?

如何称呼您?*

您的联系方式是?*

留言

您将免费获得

  • 1

    全面诊断网站

    您将获得专家对您网站的全面诊断服务。我们不同于传统建站公司他们大多“免费检查”仅是一些通用的、浅显的建议。

  • 2

    找出可能让您错过的增长点

    我们将挖掘出有利于转化率提升而您网站却达不到的指标,诊断报告还将详细说明您网站可以改善的确切地方。

  • 3

    流量查询与分析

    我们通过专业手段,为您提供您所在行业的流量增长趋势与流量来源分析。

  • 4

    定制方案与报价

    对您的需求深入了解后,并结合您所处行业的竞争分析结果,我们将为您量身定制一份增长方案。

下一步

贵公司预算范围是?

贵公司的团队规模是?

目前主要的营销渠道是?

从哪里了解到我们?

免费预约

贵公司的网址是?

如何称呼您?*

您的联系方式是?*

留言

立即提交

扫描二维码

关注公众号

回复【数字营销】即可获取白皮书

book

免费获取《2022数字营销白皮书》

扫描二维码 回复【数字营销】免费获取

code

马上来一场关于您的项目探讨会?

免费预约 >

我们的服务已触达

全国20多个省份乃至海外

中国

深圳、上海、北京、广州、香港、成都、重庆、杭州、武汉、西安、天津、苏州、南京、郑州、长沙、沈阳、青岛、合肥、佛山、南昌、台湾、昆明、海口、厦门...

海外

美国、加拿大、新加坡、日本、韩国、俄罗斯、法国、英国、德国、意大利、澳大利亚、沙特阿拉伯、新西兰、荷兰...

合作咨询
请通过表单提交合作咨询信息,我们会尽快与您取得联系。

我们的服务已触达

全国20多个省份乃至海外

中国

深圳、上海、北京、广州、香港、成都、重庆、杭州、武汉、西安、天津、苏州、南京、郑州、长沙、沈阳、青岛、合肥、佛山、南昌、台湾、昆明、海口、厦门...

海外

美国、加拿大、新加坡、日本、韩国、俄罗斯、法国、英国、德国、意大利、澳大利亚、沙特阿拉伯、新西兰、荷兰...

合作咨询 0755-82326831
请通过表单提交合作咨询信息,我们会尽快与您取得联系。