在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. iOS开发Swift篇—（七）函数

    iOS开发Swift篇—(七)函数 一.函数的定义 (1)函数的定义格式 1 func 函数名(形参列表) -> 返回值类型 { 2 // 函数体... 3 4 } (2)形参列表的格式 形参名 ...

  2. android bitmap compress

    android的照相功能随着手机硬件的发展,变得越来越强大,能够找出很高分辨率的图片. 有些场景中,需要照相并且上传到服务,但是由于图片的大小太大,那么就上传就会很慢(在有些网络情况下),而且很耗流量 ...

  3. FreeRTOS 中断优先级配置（重要）

    以下转载自安富莱电子: http://forum.armfly.com/forum.php NVIC 的全称是 Nested vectored interrupt controller,即嵌套向量中断 ...

  4. 如何利用wireshark对TCP消息进行分析

    原文:https://www.cnblogs.com/studyofadeerlet/p/7485298.html 如何利用wireshark对TCP消息进行分析   (1) 几个概念介绍 1 seq ...

  5. CentOs下安装gcc/g++/gdb

    使用yum安装gcc:yum install gcc即可.使用:which gcc 查看是否安装成功 使用yum安装g++:yum install gcc-c++ 即可.使用:which g++ 查看 ...

  6. Cookie js 操作

    从事web开发也有些日子了,cookie 是个啥差不多能说明白,可是实际自己一上手操作就是得去搜索(你们懂的),结果被鄙视了...所以就写一篇博文做为自己的学习笔记,嘿嘿,博客的好处在此体现出来了. ...

  7. 一个try可以跟进多个catch语句，用于处理不同情况，当一个try只能匹配一个catch

    一个try可以跟进多个catch语句,用于处理不同情况.当一个try只能匹配一个catch. 我们可以写多个catch语句,但是不能将父类型的exception的位置写在子类型的excepiton之前 ...

  8. 【BZOJ】1621: [Usaco2008 Open]Roads Around The Farm分岔路口（dfs）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1621 这题用笔推一下就懂了的.... 当2|(n-k)时,才能分,否则不能分. 那么dfs即可.. ...

  9. 【BZOJ】1622: [Usaco2008 Open]Word Power 名字的能量（dp/-模拟）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1622 这题我搜的题解是dp,我也觉得是dp,但是好像比模拟慢啊!!!! 1400ms不科学! 设f[ ...

  10. Html制作简单而漂亮的登录页面

    先来看看样子. html源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...