在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. WWDC 2014 Session笔记 - iOS界面开发的大一统

    本文是我的 WWDC 2014 笔记 中的一篇,涉及的 Session 有 What's New in Cocoa Touch Building Adaptive Apps with UIKit Wh ...

  2. 02、Universal app 中按钮图标使用

    前言,windows10 昨天凌晨发布了,windows store 开发模型比以前的 silverlight 模型由很多优势, 我也小兴奋了一把. 正文: 在 windows phone 8.0 以 ...

  3. jstl format date

    使用fmt函数需在jsp中引入 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" ...

  4. Linux samba 服务的配置

    今天有个学生问我 samba 服务怎么配置,所以晚上特意研究一下怎么配置这个服务. 过程如下: sudo apt-get install samba samba-common // 安装 samba ...

  5. [Application]Ctrl+C终止程序代码

    代码如下: #include <stdio.h> #include <stdlib.h> #include <iostream> #include <sign ...

  6. hdu6134 Battlestation Operational 莫比乌斯第一种形式

    /** 题目:hdu6134 Battlestation Operational 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6134 题意:f(n) = ...

  7. 大数据(13) - Spark的安装部署与简单使用

    一 .Spark概述 官网:http://spark.apache.org 1.        什么是spark Spark是一种快速.通用.可扩展的大数据分析引擎,2009年诞生于加州大学伯克利分校 ...

  8. C++ 类的继承三（继承中的构造与析构）

    //继承中的构造与析构 #include<iostream> using namespace std; /* 继承中的构造析构调用原则 1.子类对象在创建时会首先调用父类的构造函数 2.父 ...

  9. orm工具的基本思想

    orm工具的基本思想无论是用过的hibernate,mybatis,你都可以法相他们有一个共同点:1. 从配置文件(通常是XML配置文件中)得到 sessionfactory.2. 由sessionf ...

  10. 【BZOJ】1009: [HNOI2008]GT考试（dp+矩阵乘法+kmp+神题）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1009 好神的题orzzzzzzzzzz 首先我是连递推方程都想不出的人...一直想用组合来搞..看来 ...