在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. Cocos2d-x 3.x 如何编译成安卓程序

    1.安装JDK 2.安装eclipse,安卓官方现在不提供eclipse for android,只好自己配置了.首先安装一个eclipse,在Help——Install New SoftWare中安 ...

  2. cf339d Xenia and Bit Operations

    Xenia and Bit Operations Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...

  3. sqlmap中tamper脚本绕过waf

    0x00 背景 sqlmap中的tamper脚本来对目标进行更高效的攻击. 由于乌云知识库少了sqlmap-tamper 收集一下,方便学习. 根据sqlmap中的tamper脚本可以学习过绕过一些技 ...

  4. hive 和Hbase的pom文件

    <hadoop-common></hadoop-common> <hadoop-hdfs></hadoop-hdfs> <dependency&g ...

  5. gcc 编译流程分析

    //test.c #include<stdio.h> int main() { ,y=; printf("x=%d y=%d\n",x,y); ; } 1:预处理阶段, ...

  6. getopt--parse command line options

    getopt解析命令行选项 getopt, getopt_long, getopt_long_only, optarg, optind, opterr, optopt - Parse command- ...

  7. HeadFirst jsp 08 无脚本JSP

    web页面设计人员真的必须懂 java ? web页面人员可以很快学习 EL 语言. 目前不知道 EL 应用前景如何, 但是我们香港系统没有使用 EL. include 指令 include指令告诉容 ...

  8. 数论 - 119. Magic Pairs

    Magic Pairs Problem's Link Mean: 已知N.A0.B0,对于给定X.Y,若A0X+B0Y能被N整除,则AX+BY也能被N整除,求所有的A.B.(0<=A.B< ...

  9. 绑定QQ登录 PHP OAuth详解(转)

    越来越多的网站开始采用 第三方账号登录 如qq 微博 开心网 等诸多流行的社交平台,利用第三方账号登录,可以更好地省去用户的注册时间,并且极大地提高用户体验,吸引更多的潜在用户. 让用户拥有 一个号码 ...

  10. phalcon下拉列表

    <?php echo Phalcon\Tag::selectStatic("gender", array(0 => "Male", 1 => ...