在html中实现文件上传的方式为form表单中使用input type="file"控件,但是这个控件往往显示不是美观,影响页面效果,这时候,一般就通过一键上传的操作,来实现点击一个按钮上传文件.

原理:

设置一个具有file上传文件框的form表单,并且设置style表单为不显示的,同时呢,要对表单中的input控件进行onchange事件监听,当input控件改变的时候,就触发表单提交的操作.设置一个上传文件的按钮,当点击按钮时候,触发表单中的input空间的click事件,来进行文件的浏览.这样一来,当选择好文件后,就自动提交了.

因为表单提交的话,就会自动刷新当前页面,因此采用,在页面中添加一个隐藏的<iframe>控件,并且将file提交的表单form中的target属性指向iframe控件,这样一来,就实现了当前页面无刷新的一键上传的操作.

代码为:(注:jq文件需要自己引入)

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>文件一键上传</title>
  7.         <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
  8.         <script type="text/javascript">
  9.             $(function() {
  10.                 //当点击"一键上传"按钮的时候,触发表单中的浏览文件的操作
  11.                 $("#hehe").click(function() {
  12.                     $("#uploadfile").click();
  13.                 })
  14.                 //当选择好上传文件后,执行提交表单的操作
  15.                 $("#uploadfile").change(function() {
  16.                     alert("上传文件");
  17.                     $("#form1").submit();
  18.                 })
  19.             })
  20.         </script>
  21.     </head>
  22.  
  23.     <body>
  24.         <input type="button" id="hehe" value="上传文件" />
  25.         <form style="display: none;" id="form1" action="#" method="post" enctype="multipart/form-data" target="myframe">
  26.             <input type="file" name="uploadfile" id="uploadfile" />
  27.         </form>
  28.         <iframe style="display: none;" id="myframe"/>
  29.     </body>
  30.  
  31. </html>

当点击上传文件按钮的时候,自动弹出选择文件的页面

在后台页面进行操作,而不是在当前页面刷新

实际开发中,往往采用的是jquery.ocupload的js插件进行一件上传的操作;

官网:http://code.google.com/p/ocupload/

实际操作js代码示例:

  1. $("#button-import").upload({
  2.     action: '实际开发中的提交位置',
  3.     onSelect: function (self, element) {
  4.     this.autoSubmit = false;  //关闭自动提交,方便后面进行文件类型判断
  5.     var filename=this.filename();//设定文件名
  6.                 var flag1= filename.endsWith(".xls");
  7.                 var flag2= filename.endsWith(".xlsx");
  8.                 if(flag1||flag2){//判断是否是所需要的文件类型,这里使用的是excel文件
  9.                       this.submit();
  10.                 }else{
  11.                       alert("提示请选择正确的文件");
  12.                 }
  13.  
  14.                 },
  15.        onComplete: function (data, self, element) {
  16.                alert("提示文件上传成功");//当上传成功后,提示
  17.          }
  18. });

就是这么简单,具体就不演示了

HTML中简单实现文件的一键上传的操作的更多相关文章

  1. input type file onchange上传文件的过程中，同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

  2. 适配Android4.4~Android11，调用系统相机，系统相册，系统图片裁剪，转换文件（对图片进行上传等操作）

    前言 最近Android对于文件的许多方法进行了修改,网络上又没有对Android4到Android11关于系统相机.系统相册和系统裁剪的适配方案,我花了几天事件总结了一下,先上源码 DEMO源码 先 ...

  3. 文件一键上传、汉字转拼音、excel文件上传下载功能模块的实现

    ----------------------------------------------------------------------------------------------[版权申明: ...

  4. JSP+Servlet中使用cos.jar进行图片上传（文件上传亦然）

    链接:JSP+Servlet中使用jspsmartupload.jar进行图片上传下载 关于cos.jar,百度百科只有这么几句话(http://baike.baidu.com/subview/406 ...

  5. Python 一键上传下载&一键提交文件到SVN入基线工具

    一键上传下载&一键提交文件到SVN入基线工具   by:授客 QQ:1033553122 实现功能 1 测试环境 1 使用说明 1   注: 根据我司项目规则订制的一套工具,集成以下功能,源码 ...

  6. 程序员PS技能（四）：程序员创建PSD文件、展示简单PSD设计流程，上传PSD至蓝湖，并下载Demo切图

    前言   本篇是程序员仿照ui设计创建psd且切图五个按钮效果上传至蓝湖,本篇篇幅较长,整体完成一个目标,没有分篇幅了.   前提条件   已经安装了PS,已经在PS上安装了蓝湖插件,并且曾经已经上传 ...

  7. jquery ocupload一键上传文件应用

    直接上栗子 这是官方文档栗子 var myUpload = $(element).upload({ name: 'file', action: '', enctype: 'multipart/form ...

  8. 在 github 中新建仓库后，如何上传文件到这个仓库里面。

    在 github 中新建仓库后,如何上传文件到这个仓库里面. libin@hglibin MINGW64 /e/github.io (master) $ git remote libin@hglibi ...

  9. 免费 CDN 玩法 —— 文件一键上传到 NPM

    前言 unpkg.jsdelivr 等站点可加速 NPM 包文件,适合作为个人网站或演示案例的免费 CDN. 虽然上传文件到 NPM 很简单,创建 package.json 然后 npm publis ...

随机推荐

  1. UltraISO制作启动盘及提取U盘为ISO镜像

    我们先来说下UltraISO这个工具,中文名也叫软碟通,他是一个无需量产你的U盘就可以把U盘做成启动盘的工具,当然了,这么强大的工具肯定不是免费版的,对,他是共享的:但是你可以下载特别版嘛..网上到处 ...

  2. 再谈Nginx Rewrite， 中文URL和其它

    上次谈到过Nginx和中文URL的问题,这几天又加深了认识. 多分享几个关于Nginx Rewrite的经验. Nginx匹配指定中文URL的方法:rewrite "(*UTF8)^x{66 ...

  3. 每日英语：Air Pollution From Coal Use Cuts Lifespans in China, Study Shows

    Air pollution from coal combustion likely cut life expectancy in parts of China by more than five ye ...

  4. 移动端rem的用法

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  5. 基于jQuery仿淘宝产品图片放大镜代码

    今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...

  6. Ubuntu 11.04 下安装配置 JDK 7

    第一步:下载jdk-7-linux-i586.tar.gz wget -c http://download.oracle.com/otn-pub/java/jdk/7/jdk-7-linux-i586 ...

  7. gch文件学习

    今晚学习友元函数的时候一点一点的在写一个头文件和一个源文件,中间g++ test.h了一下,无意中就生成了test.h.gch文件.后来修改了头文件的内容,但是不知道为什么一直各种出错,一番折腾之后才 ...

  8. KMP算法完整教程 (上)

    KMP算法完整教程 全称: Knuth_Morris_Pratt Algorithm(KMP算法) 类型: 高级检索算法 功能: 字符串匹配查找 提出者: D.E.Knuth(克努兹),J.H.Mor ...

  9. 面向对象设计原则三：里氏替换原则（LSP）

    里氏替换原则(LSP)定义:在任何父类出现的地方都可以用它的子类类替换,且不影响功能.解释说明:其实LSP是对开闭原则的一个扩展,在OO思想中,我们知道对象是由一系列的状态和行为组成的,里氏替换原则说 ...

  10. python 神经网络实例

    #http://python.jobbole.com/82758/ # import numpy as np # # # # sigmoid function # def nonlin(x, deri ...