文件上传小技巧/原生态【html篇】
1. 怎样自定义样式?
2. 怎样触发事件?
3. 多选文件?
4. 相关插件?
- <a href="javascript:;" up-type-id="1" class="btn btn-default small-btn switch-upload-method"><span>本地上传</span></a>
- <a href="javascript:;" up-type-id="2" class="upload-file-instead btn btn-default small-btn switch-upload-method"><span>打包工具</span></a>
- <input type="file" name="apkFiles[]" id="local-upload-real-file" class="upload-file-real hide" response-id="local-upload-container" multiple='true' />
- <input type="file" name="apkToolFiles[]" id="apk-tool-real-file" class="upload-file-real hide" response-id="apk-tool-container-textarea" />
- <script>
- $(function(){
- var alertTitle = '系统提示:';
- var submitId = '#do-submit';
- $('#taskForm').Validform({
- btnSubmit: submitId,
- tiptype: 1,
- ignoreHidden: true,
- dragonfly: false,
- tipSweep: true,
- label: ".label",
- showAllError: false,
- postonce: true,
- ajaxPost: true,
- datatype:{
- },
- beforeCheck:function(curform){
- },
- beforeSubmit:function(curform){
- $('.upload-file-real').attr('disabled', 'disabled');
- $(submitId).attr('disabled', 'disabled'); //提交前禁用按钮
- ajaxSubmitForm(curform);
- $(submitId).removeAttr('disabled'); //失败后恢复可提交
- return false;
- },
- submitForm: function(){} //不再起作用
- });
- //切换上传方法
- $('.switch-upload-method').off().on('click', function(){
- // $(submitId).attr('disabled', 'disabled');
- var pObj = $(this).parent().find('.switch-upload-method');
- var index = pObj.index(this);
- var uploadTypeId = $('#upload-type-id').val(); //上传方式:1:打包工具;2:本地上传,0:没有上传方式
- var uploadType = $(this).attr('up-type-id');
- if(parseInt($('#sub-channel-count').html()) > 0){
- if(uploadTypeId != uploadType){
- layer.alert('还有子渠道包数据,不能完成切换,请先确认清除再切换!');
- return false;
- }
- }
- pObj.not(':eq(' + index + ')').removeClass('btn-danger').addClass('btn-default');
- pObj.eq(index).removeClass('btn-default').addClass('btn-danger');
- if(uploadType == 36){ //local-upload
- $('#upload-type-id').val(uploadType);
- $('#init-apk-container').show();
- $('#apk-tool-container').hide();
- $('#upload-main-control').find('.del-it-main').css({display: 'inline-block'});
- $('#local-upload-real-file').trigger('click');
- }else if(uploadType == 35){ //apk-tool
- $('#upload-type-id').val(uploadType);
- $('#init-apk-container').hide();
- $('#local-upload-container').hide();
- $('#upload-main-control').find('.del-it-main').hide();
- $('#apk-tool-container').show();
- }
- });
- //本地上传
- $('#local-upload-real-file').off().on('change', function(){
- if(!$(this).val()){
- return false;
- }
- file_size = 0;
- filepath = $(this).val();
- maxFileSize = 30 * 1024 * 1024;
- var browserCfg = {};
- var ua = window.navigator.userAgent;
- if (ua.indexOf("MSIE") >=1 ){
- browserCfg.ie = true;
- }else if(ua.indexOf("Firefox") >=1 ){
- browserCfg.firefox = true;
- }else if(ua.indexOf("Chrome") >=1 ){
- browserCfg.chrome = true;
- }
- if (browserCfg.ie) {
- var img = new Image();
- img.src = filepath;
- file_size = img.fileSize;
- while (true) {
- if (img.fileSize > 0) {
- if (img.fileSize > maxFileSize) {
- alert("上传包超过30MB限制,请使用打包工具上传!");
- return false;
- }
- break;
- }
- }
- } else {
- file_size = this.files[0].size;
- if (file_size > maxFileSize) {
- alert("上传包超过30MB限制,请使用打包工具上传!");
- return false;
- }
- }
- var responseObjId = $(this).attr('response-id');
- var responseObj = $('#' + responseObjId);
- $('#taskForm').ajaxSubmit({
- url:'/aa/bb/uploadTmpApk',
- resetForm: false,
- dataType: 'json',
- beforeSubmit: function(option){
- window.loading = layer.load(2);
- },
- success: function(data, statusText){
- layer.close(window.loading);
- if(data.status == 1){
- $('#version-identifier').val(data.version);
- responseObj.html(data.apkInfoHtml);
- responseObj.show();
- var delObj = $('#upload-main-control').find('.del-it-main');
- delObj.css({'display': 'inline-block'});
- $('#sub-channel-count').html(data.apkTotal);
- $('#init-apk-container').hide();
- $(submitId).removeAttr('disabled');
- }else{
- layer.alert(data.info, {title: alertTitle});
- }
- },
- error: function(data){
- layer.close(window.loading);
- layer.alert('未知错误,请稍后再试!');
- }
- });
- return false;//防止dialog 自动关闭
- });
- //打包工具
- $('#apk-tool-real-file').off().on('change', function(){
- if(!$(this).val()){
- return false;
- }
- var responseObjId = $(this).attr('response-id');
- var responseObj = $('#' + responseObjId);
- $('#Form').ajaxSubmit({
- url:'/aa/bb/uploadTmpApkTool',
- resetForm: false,
- dataType: 'json',
- beforeSubmit: function(option){
- window.loading = layer.load(2);
- },
- success: function(data, statusText){
- layer.close(window.loading);
- if(data.status == 1){
- $('#version-identifier').val(data.version);
- responseObj.html(data.infoHtml);
- var parentContainer = responseObj.parent().parent(),
- nameContainer = parentContainer.find('.apk-name-container'),
- delObj = parentContainer.find('.del-it-apk-tool');
- nameContainer.html(data.apkName);
- nameContainer.attr('title', data.apkName);
- $('#apk-tool-file-tmp').html(data.fileInfo);
- $(submitId).removeAttr('disabled');
- }else{
- layer.alert(data.info, {title: alertTitle});
- }
- },
- error: function(data){
- layer.close(window.loading);
- layer.alert('未知错误,请稍后再试!');
- }
- });
- return false;//防止dialog 自动关闭
- });
- $('.apk-tool-upload-button').on('click', function(){
- $('#apk-tool-real-file').trigger('click');
- });
- });
- </script>
以上,主要就是,使用隐藏的input file标签选择,选择文件之后立即ajax提交,最后,整个表单ajax提交的过程。
文件上传小技巧/原生态【html篇】的更多相关文章
- 文件上传小技巧/后端处理【以php示例】
引语:在上一篇文章中说到,在页面中可以用隐藏的方式让你的上传页面看起来漂亮.但是这对于性能来说,并没有什么卵用,那么在后台的处理中,难道就没有一些处理技巧么?所谓后台的技巧,应该要包括上传得快一点,上 ...
- .Net文件上传--小数据--un
文件上传控件:FileUpload - 控件,界面+方法+属性Button/LinkButton/ImageButton FileUpload控件:1.SaveAs("要上传到服务器的绝对路 ...
- ( 译、持续更新 ) JavaScript 上分小技巧(四)
后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...
- ( 译、持续更新 ) JavaScript 上分小技巧(三)
最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...
- 使用.NET框架、Web service实现Android的文件上传(二)
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYUAAAKpCAIAAADcx6fPAAAgAElEQVR4nOydd1hT5+LHg1attbfr1t ...
- PHP实现视频文件上传完整实例
这篇文章主要介绍了PHP实现视频文件上传的技巧,包含了PHP配置信息的设计及大文件的处理,需要的朋友可以参考下 本文以一个完整实例的形式实现了视频文件上传的功能.虽然是比较基础的应用,仍有一定的 ...
- 深入springMVC源码------文件上传源码解析(下篇)
在上篇<深入springMVC------文件上传源码解析(上篇) >中,介绍了springmvc文件上传相关.那么本篇呢,将进一步介绍springmvc 上传文件的效率问题. 相信大部分 ...
- webAPI文件上传时文件过大404错误的问题
背景:最近公司有个需求,外网希望自动保存数据到内网,内网有2台服务器可以相互访问,其中一台服务器外网可以访问,于是想在 这台服务器上放个中转的接口.后来做出来以后测试发现没有问题就放线上去了,不顾发现 ...
- WEB安全第二篇--用文件搞定服务器:任意文件上传、文件包含与任意目录文件遍历
零.前言 最近做专心web安全有一段时间了,但是目测后面的活会有些复杂,涉及到更多的中间件.底层安全.漏洞研究与安全建设等越来越复杂的东东,所以在这里想写一个系列关于web安全基础以及一些讨巧的pay ...
随机推荐
- css样式表 格式与布局
1 样式表 内联样式表 内嵌样式表 外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器 以.开头 ID选择器 以#开 ...
- [算法]树上倍增求LCA
LCA指的是最近公共祖先(Least Common Ancestors),如下图所示: 4和5的LCA就是2 那怎么求呢?最粗暴的方法就是先dfs一次,处理出每个点的深度 然后把深度更深的那一个点(4 ...
- 浅析Java内存模型
概述 Java内存模型的主要目标是定义程序中各个变量的访问规则,即在虚拟机中将变量存储到内存和从内存中取出变量这样的底层细节.此处的变量是线程共享的,存在竞争问题的. Java内存模型规定了所有的变量 ...
- ASP.NET 创建网站地图
很多个人站长会使用工具来生成自己网站的站点地图,这样做的缺点在于网站的 sitemap 不能及时的得到更新.当我们发表了一篇新文章时,应该对网站的地图进行更新,并通知搜索引擎网站地图已经发生了改变! ...
- Unity(二)生命周期LifetimeManager
描述:Unity的生命周期是注册的类型对象的生命周期,而Unity默认情况下会自动帮我们维护好这些对象的生命周期,我们也可以显示配置对象的生命周期,Unity将按照配置自动管理. //创建一个Unit ...
- document.referrer 特性
最近需要用到document.referrer,但是在测试的时候,总是获取为空,百思不得其解. 于是发动百度,看了大量的文章没有一个说到点子上是为什么,后来偶然看到document.referrer ...
- python工具的安装
下载: python安装包:python-2.7.3.msi pywin32-218.win32-py2.7.exe setuptools安装包:setuptools-0.6c11.win32-py2 ...
- Spring学习笔记 Part.01
Hibernate的作用: 1.可以解决以面向对象的方式操作数据库的问题 请求参数(String)→Strut2→Action(对象)→业务逻辑组件(面向对象) 2.所以任何一个ORM框架都可以代替H ...
- CoreLocation框架的使用---定位,求两地距离
前言: 在iOS开发中,有关导航,周边的开发,必须基于2个框架: Map Kit :用于地图展示 Core Location :用于地理定位 用户隐私的保护 从iOS 6开始,苹果在保护用户隐私方 ...
- CSS中父元素高度没有随子元素高度的改变而改变,应该如何解决?
如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...