文档章节

js文件上传

 开源小秦胡
发布于 2016/11/07 11:08
字数 607
阅读 13
收藏 0
js

一、FileReader对象

用来把文件读入内存,并且读取文件中的数据。FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。

浏览器支持情况,可以根据window.FileReader进行判断,火狐、谷歌支持,IE不支持。

二、FileReader的方法和事件介绍

表一:方法;表二:事件;

readAsBinaryString(file)

将文件读取二进制码;
通常我们将它传送到后端,后端可以通过这段字符串存储文件;

readAsText(file, [encoding]) 将文件读取为文本;
该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsDataURL(file) 将文件读取为DataURL;
将文件读取为一串Data URL字符串,将小文件以一种特殊格式的URL地址直接读入页面。小文件指图像与html等格式的文件。
abort 中断读取

 

 

 

 

 

 

onabort 数据读取中断时触发
onerror 数据读取出错时触发
onloadstart 数据读取开始时触发
onload 数据读取成功完成时触发
onloadend 数据读取完成时触发,无论成功失败

 

 

 

 

 

 

code:

<body>
<img id="image"src=""/>
<input type="file" onchange="selectImage(this);"/>
<script>
if(window.FileReader){
  function selectImage(file){
    var reader = new FileReader();
    reader.readAsDataURL(file.files[0]);
    reader.onload = function(evt){
      document.getElementById('image').src = evt.target.result;
    }
  }
}else{
  console.log('浏览器不支持FileReader');
}
</script>
</body>

FileReader对象的这几个方法用法是一样的。

三、input type="file" 上传按钮美化

input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div或a包裹,就实现了美化功能。

html:

<a href="javascript:;" class="a-upload">
<input type="file" name="" id="">上传按钮1
</a>
<a href="javascript:;" class="file">上传按钮2
<input type="file" name="" id="">
</a>

css:

第一个按钮:

.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}

.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}

.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}

第二个按钮:

.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}

本文转载自:http://www.th7.cn/web/js/201512/142288.shtml

粉丝 0
博文 13
码字总数 369
作品 0
海淀
私信 提问
jQuery 关于文件上传表单处理的一个非常怪异的问题

jQuery 有个插件 jQuery.Form ,这个插件功能很强大,可以用来处理文件上传的表单。 下面是这个问题的描述: 假设有这么一个表单 我们可以用下面的脚本来提交 $('#form_img').ajaxForm({ su...

红薯
2009/02/23
4.3K
9
jquery-uploadify上传插件上传按钮不能点击

最近做文件上传的时候用jquery-uploadify3.1上传,可是上传按钮点击后没有反应,也不知道是怎么回事,请大家帮忙看看 我的html页面 test 我的js,名字就是activity.js $(document).ready(fun...

银粟
2015/12/14
1K
1
急!!!js路径问题,大神帮看看

外部脚本 upload.js代码 $("#file").uploadify({ 'uploader' : '../../../js/uploadify.swf', 'script' : 'UploadServlet?userid=1', //默认用户ID为1 'cancelImg' : '../../../js/cancel.p......

zhang_j2ee
2014/06/05
692
2
超棒的纯Javascript实现的文件上传功能 - Fine uploader

日期:2012-10-28 来源:GBin1.com 还记得我们上次介绍的javascript文件上传类库 - javascript类库:FileDrop?今天我们介绍另外一个独立不依赖任何类库的文件上传js类库:Fine Uploader。 ...

gbin1
2012/10/29
1K
5
原创jquery图片上传预览插件uploadView

勾国印原创jquery图片上传前预览插件uploadView,支持自定义允许上传图片的最大尺寸、允许上传图片的格式、预览图片的宽度和高度以及上传成功后回调函数,兼容手机端和PC端。 大家在开发网站...

够过瘾
2015/10/24
5.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

还为PDF转Word抓狂?以下神器让你在职场倍受欢迎!

身在职场的你,是否一直在琢磨:如何能让自己在公司更受欢迎?如何才能在办公室里混个好人缘?如何在同事圈里留个好印象?其实,想要让自己成为受欢迎的人,只要让自己成为大家需要的人不就行...

foxit2world
15分钟前
6
0
AndServer+Service打造Android服务器实现so文件调用

so 文件调用 随着 Android 移动安全的高速发展,不管是为了执行效率还是程序的安全性等,关键代码下沉 native 层已成为基本操作。 native 层的开发就是通指的 JNI/NDK 开发,通过 JNI 可以实...

夜幕NightTeam
16分钟前
3
0
Docker下kafka学习三部曲之二:本地环境搭建

在上一章《 Docker下kafka学习,三部曲之一:极速体验kafka》中我们快速体验了kafka的消息分发和订阅功能,但是对环境搭建的印象仅仅是执行了几个命令和脚本,本章我们通过实战来学习如何编写...

程序员欣宸
17分钟前
4
0
萌新推荐!不再为Excel转换PDF发愁,Aspose.Cells for .NET一步到位!

Aspose.Cells for .NET(点击下载)是Excel电子表格编程API,可加快电子表格管理和处理任务,支持构建具有生成,修改,转换,呈现和打印电子表格功能的跨平台应用程序。 将Excel工作簿转换为...

mnrssj
18分钟前
6
0
对于绘画小白怎么画制服?该注意什么?

怎样制作学生服装?想必绘画初学者们常常会想的问题吧,不知道怎样才能画好人物的衣服,别着急,今日就在这儿讲一些关于如何绘画学生衣服校服的教程给我们!期望能够帮到你们! 轻便西装是不...

热爱画画的我
23分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部