在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. PHP中把stdClass Object转array的几个方法

    方法一: 复制代码代码如下: //PHP stdClass Object转array function object_array($array) { if(is_object($array)) { $ ...

  2. 深入浅出Spring（一）Spring概述

    现在很多的企业级项目中基本上都会用到了Spring框架,那么为什么会出现Spring,Spring是什么?这次的博文我主要为大家简单介绍一下Spring. Java EE优缺点 我们都知道在2003年 ...

  3. PHP——字符串

    <?php //strlen("aaa");取字符串的长度 *** echo strlen("aaaaa"); echo "<br /&g ...

  4. Spider Studio 新版本 (20140108) - 优化设置菜单 / 生成程序集支持版本号

    本次更新包含两项改进: 1. 优化了设置菜单, 去掉了一些不必要的浏览器行为设置选项: 取而代之的是在脚本中由用户自行设置: public void Run() { Default.CaptureNe ...

  5. git clone 故障 fatal could not create work tree dir

    问题如上图,原因是openWRT目录权限的问题,该目录是新创建的查看目录权限后发现该目录只对root有读写权限,对所有者及其他用户无读写权限.最简单的chmod 777 openWRT即可解决问题.

  6. PHP 汉字转成拼音

    <?php class ZH{ /** * 将字符串转化为拼音 */ function Pinyin($_String, $_Code='gb2312') { $_DataKey =" ...

  7. VMware ESXi vsan.v00卡 停

    重装VMware ESXi 6.5,结果在loading vsan.v00文件的时候卡住了,过了几个小时都停留在这个界面.无意间重启使用UEFI 启动,提示某文件校验出错,MD5对不上,重新写入安装镜 ...

  8. 小结：A* & IDA* & 迭代深搜

    概要: 在dfs中,如果答案的深度很小但是却很宽,而且bfs还不一定好做的情况下,我们就综合bfs的优点,结合dfs的思想,进行有限制的dfs.在这里A*.IDA*和迭代深搜都是对dfs的优化,因此放 ...

  9. Window发声函数Beep、MessageBeep

     C++ Code  1234567891011   WINBASEAPI BOOL WINAPI Beep(__in DWORD dwFreq,      __in DWORD dwDuration ...

  10. 通过代码注册COM、DLL组件

    注册代码如下:  C++ Code  1234567891011121314151617181920212223242526272829303132333435363738   // //====== ...