DOM:

<form id="clueForm" class="insert-dialog" action="/xxx/xxx"method="post" enctype="multipart/form-data" target="hidFrame">
<a href="javascript:void(0)" class="uploadBtn">上传</a>
<input type="file" id="fileUpload" name="file" style="display:none"/>
<iframe id="hidFrame" name="hidFrame" style="display: none"></iframe>
</form>

注:hidden的input和iframe.

  input type设置成file,click后调起窗口选择文件。选完后数据流存在input的value中。

  hidden的iframe用于form提交后的callback。

JS:

var _file = '';

$('#fileUpload').change(function(e){
var files = e.target.files;
if(files && files.length > 0){
var reader = new FileReader();
//读取文件
reader.readAsText(files[0], "UTF-8");
//读取完文件之后会回来这里
reader.onload = function(evt){
var fileString = evt.target.result;
_file = fileString;
};
} var filename = $(this).val();
var lastIndex =filename.lastIndexOf("\\");
if(lastIndex >= 0){
filename = filename.substring(lastIndex + 1);
}
//文件名
$('XXXXXXX').val(filename);
}); // 确定button
$('#clueForm').on('click', '#uploadBtn', function(){
//data test
if(!$('#clueForm').find('.dialogUpload :file').val()){
alert('请先上传文件');
}else{
$('#clueForm').submit();
}
});
//模仿callback
document.getElementById('hidFrame').onload = function(e) {
var res = $(this.contentWindow.document.body).html();
res = JSON.parse(res);
alert(res);
};

注:input选择完文件后会触发change事件。

  reader.readAsText(files[0], "UTF-8")来读取文件。

  上传用的是form的submit,数据格式multipart/form-data。

  关于post后的callback,是通过触发form的target。target指向一个hidden的iframe,用来刷新。response会写入iframe中。

补充: 前几天(Time: 2017/04/04)看到的博客,记录 => http://www.cnblogs.com/cloudgamer/archive/2009/12/01/Quick_Upload.html

js文件上传的更多相关文章

  1. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  2. js文件上传库

    收集了2个与具体UI库和框架无任何耦合的JS文件上传库:支持断点续传.支持npm安装. resumable.js fileapi

  3. Node.js 文件上传 cli tools

    Node.js 文件上传 cli tools byte stream 断点续传 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  4. JS文件上传神器bootstrap fileinput详解

    Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...

  5. js 使用jquery.form.js文件上传

    1.文件上传,使用jquery.form.js插件库 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  6. 讲解开源项目:功能强大的 JS 文件上传库

    本文作者:HelloGitHub-kalifun HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  7. js文件上传下载组件

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

  8. 7款js文件上传插件

    1.  jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby ...

  9. Node.js文件上传

    Node.js express使用Multer实现文件上传html部分 <div> <h3>文件上传:</h3> 选择一个文件上传: <br/> < ...

  10. ajaxfileupload.js 文件上传

    一,前台代码. <input id="fileToUpload" type="file" size="25" name="f ...

随机推荐

  1. CodeForces 165E Compatible Numbers(位运算 + 好题)

    wo integers x and y are compatible, if the result of their bitwise "AND" equals zero, that ...

  2. linux下centos的网络连接

  3. Win7普通版-X86-SP1-ios-旗舰版安装

    ------------------------------- 自己的电脑是X64Win7系统.Acer电脑----->>现在改装成  Win7普通版-X86-SP1-ios-旗舰版安装 ...

  4. HTTP超文本传输协议-HTTP/1.1中文版

    摘要 超文本传输协议(HTTP)是一种为分布式,合作式,多媒体信息系统服务,面向应用层的协议.它是一种通用的,不分状态(stateless)的协议,除了诸如名称服务和分布对象管理系统之类的超文本用途外 ...

  5. e-chart 本地加载中国地图

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. Node.js process 模块常用属性和方法

    Node.js是常用的Javascript运行环境,本文和大家发分享的主要是Node.js中process 模块的常用属性和方法,希望通过本文的分享,对大家学习Node.js http://www.m ...

  7. [NHibernate]一对多关系(级联删除,级联添加)

    目录 写在前面 文档与系列文章 一对多关系 一个例子 级联删除 级联保存 总结 写在前面 在前面的文章中,我们只使用了一个Customer类进行举例,而在客户.订单.产品中它们的关系,咱们并没有涉及, ...

  8. 逻辑思维面试题-java后端面试-遁地龙卷风

    (-1)写在前面 最近参加了一次面试,对笔试题很感兴趣,就回来百度一下.通过对这些题目的思考让我想起了建模中的关联,感觉这些题如果没接触就是从0到1,考验逻辑思维的话从1到100会更好,并且编程简易模 ...

  9. log4net 运行时改变日志级别

    ((log4net.Repository.Hierarchy.Hierarchy)LogManager.GetRepository()).Root.Level = Level.Debug; ((log ...

  10. eclipse 快捷键

    Eclipse快捷键大全 Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行  Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ 复制当前行到 ...