在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. Django REST framework 知识点总结

    一.安装DjangoREST framework #先安装Django #安装必要的包 pip install djangorestframework coreapi (1.32.0+) - Sche ...

  2. 16位结构的CPU，8086给出物理地址的方法

    .16位结构的CPU 概括地讲,16位结构(16位机,字长为16位等常见说法,与16位结构的含义相同)描述了一个CPU具有下面几方面结构特性: 1.运算器一次最多可以处理16位的数据结构 2.寄存器的 ...

  3. Unity3D学习（十一）：关于UI销毁后图集仍然无法释放问题的解决办法

    前言 最近进行项目性能优化的时候发现的问题. 问题 从大厅进到单局的过程中,会经过选择英雄和加载两个流程,这两个流程对应的UI界面都会有一张几mb左右的贴图作为背景,在进入单局游戏后这两个UI已经销毁 ...

  4. python学习笔记（2）--sublimeText3运行python

    https://www.zhihu.com/question/22904994 知乎用户 To the knowledge 74 人赞同 如果是想在sublime里要python shell那种交互或 ...

  5. jQuery+html5实现的3D动态切换焦点轮播幻灯片

    今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Ch ...

  6. java strtus2 拦截器(Interceptors）

    在strtus2 中有一个比较重要的东西就是拦截器(Interceptors) 拦截器可以做到在已有的业务中插入一块共通的,比如在一个业务中,直接插入一串登录功能,就不用去每个页面一个个去显示是否登录 ...

  7. contract

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  8. ContextLoader,ContextLoaderListener解读

    一.ServletContext 有 addListener(..) 方法,也有创建的方法 createListener(Class<T> c) . 有addFilter(..) 方法,也 ...

  9. 图形用户界面（Graphical User Interface，简称 GUI，又称图形用户接口）

    图形用户界面(Graphical User Interface,简称 GUI,又称图形用户接口)是指采用图形方式显示的计算机操作用户界面. 与早期计算机使用的命令行界面相比,图形界面对于用户来说在视觉 ...

  10. hashSet的底层是数组，其查询效率非常高

    如果偷懒,没有设定equals(),就会造成返回hashCode虽然结果相同,但在程序执行的过程中会多次地调用equals(),从而影响程序执行的效率. 我们要保证相同对象的返回的hashCode一定 ...