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

原理:

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

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>文件一键上传</title>

        <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(function() {

                //当点击"一键上传"按钮的时候,触发表单中的浏览文件的操作

                $("#hehe").click(function() {

                    $("#uploadfile").click();

                })

                //当选择好上传文件后,执行提交表单的操作

                $("#uploadfile").change(function() {

                    alert("上传文件");

                    $("#form1").submit();

                })

            })

        </script>

    </head>

    <body>

        <input type="button" id="hehe" value="上传文件" />

        <form style="display: none;" id="form1" action="#" method="post" enctype="multipart/form-data" target="myframe">

            <input type="file" name="uploadfile" id="uploadfile" />

        </form>

        <iframe style="display: none;" id="myframe"/>

    </body>

</html>

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

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

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

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

实际操作js代码示例:

$("#button-import").upload({

    action: '实际开发中的提交位置',

    onSelect: function (self, element) {

    this.autoSubmit = false;  //关闭自动提交,方便后面进行文件类型判断

    var filename=this.filename();//设定文件名

                var flag1= filename.endsWith(".xls");

                var flag2= filename.endsWith(".xlsx");

                if(flag1||flag2){//判断是否是所需要的文件类型,这里使用的是excel文件

                      this.submit();

                }else{

                      alert("提示请选择正确的文件");

                }

                },

       onComplete: function (data, self, element) {

               alert("提示文件上传成功");//当上传成功后,提示

         }

});

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

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. 每日英语：A Better Way To Treat Anxiety

    Getting up the nerve to order in a coffee shop used to be difficult for 16-year-old Georgiann Steely ...

  2. java中虚拟机命令：jstack使用方法

    Stack Trace for Java,用于生成虚拟机当前的线程快照信息,包含每一条线程的堆栈信息.该命令通常用于定位线程停顿原因,当出现线程停顿时,可通过stack查看每个线程的堆栈信息,进而分析 ...

  3. OpenGL ES 简单教程

    什么是OpenGL ES? OpenGL ES (为OpenGL for Embedded System的缩写) 为适用于嵌入式系统的一个免费二维和三维图形库. 为桌面版本号OpenGL 的一个子集. ...

  4. socket相关函数中断后重试

    慢系统调用accept,read,write被信号中断时应该重试.对于accept,如果errno为ECONNABORTED,也应该重试. connect虽然也会阻塞,但被信号中断时不能立即重试,该s ...

  5. 70个shell经常使用操作

    1) 怎样向脚本传递參数 ? ./script argument 样例: 显示文件名脚本 ./show.sh file1.txt cat show.sh #!/bin/bash echo $1 2) ...

  6. iOS开发小技巧--键盘处理以及解决block造成循环引用的小技巧

  7. C++ 类的继承二（赋值兼容性原则）

    //赋值兼容性原则 #include<iostream> using namespace std; class PointA{ public: PointA(){ x = ; y = ; ...

  8. 28Mybatis_查询缓存-二级缓存-二级缓存测试-

    二级缓存原理:

  9. Spring Cloud对于中小型互联网公司来说是一种福音

    Spring Cloud对于中小型互联网公司来说是一种福音,因为这类公司往往没有实力或者没有足够的资金投入去开发自己的分布式系统基础设施,使用Spring Cloud一站式解决方案能在从容应对业务发展 ...

  10. 以下web.xml片断（ ）正确地声明servlet 上下文参数。

    A <init-param> <param-name>MAX</param-name> <param-value>100</param-value ...