最近有几个问题一直被提及,就是图片上传这一块,虽然之前也说过,今天对这部分内容进行一个归纳和整理.
1.自定义input file样式
input file有自己默认的样式,而且这个样式一般是不能进行修改的,所以想自定义样式,思路是在input标签外套一层父级,a标签和div都可以,然后把input的透明度设置成0,把想要的样式都加到父级上,这样就能修改了
首先是CSS部分代码:
<style>
a {
display: inline-block;
width: 200px;
height: 100px;
background: red;
line-height: 100px;
text-align: center;
color: black;
text-decoration: none;
position: relative;
font-size: 25px;
}
a:hover {
background: green;
}
input {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
</style>
然后是body对应内容
<a/ href="#"> // 把/去掉就好了,要不总不显示
图片上传
<input type="file" value="浏览" />
</a>
跟file类似的还有radio,想使用自定义的点或者图片,可以参照上面的写法.
如果已经确定了上传文件的类型,可以直接指定接受的类型,这样能避免因类型不正确而带来的错误,使用属性accept指定文件类型,顺便把多文件上传的代码也放进去
<input type="file" value="浏览" name="up[]" id="up" multiple="multiple" accept="image/jpeg, image/gif"/>
2.上传预览
这部分就需要找到对应的上传图片,并且显示在屏幕上.可以上传之后显示返回的网络图片,也能显示本地的图片,网络图片依赖后台返回数据,这里只说一下怎么显示本地的图片,做预览
当图片上传成功之后,可以给input加一个onchange事件,这个事件会在上传之后触发
var up = document.getElementById("up");
up.onchange = function(){
console.log(this.files);
}
我打印了一下this.files,它包含了上传的所有的文件,用法跟数组类似,也是下标取值,取出来的值包含了上传文件所有的信息,包括尺寸,文件类型,文件名等.多文件也一样,按上传顺序用下标取值.files还有length,能获取长度
接下来是获取本地图片的路径,然后给img标签赋值
var img = document.getElementById("im");
var up = document.getElementById("up");
up.onchange = function(){
console.log(this.files.length);
var blob2 = URL.createObjectURL(this.files[0]);
img.src = blob2;
}
用了一个URL对象,根据对应上传文件创建了一个路径,然后给图片src赋值,就实现了上传图片预览的功能
3.FileReader 文件读取
FileReader提供了读取文件的方法和读取结果的事件类型,能帮助获取文件内容,也能对上传过程进行监听.它的使用有兼容问题,主要是还是IE兼容
FileReader的使用需要通过构造函数创建一个对象,然后对这个对象进行方法调用,它有几个方法,能把文件异步读到内存里:
1.readAsText(file,encoding)：以纯文本形式读取文件，将读取到的文本保存在result属性中，第二个参数用于指定编码类型，可选。
2.readAsDataURL(file)：读取文件以数据URL的形式保存在result属性中。
3.readAsBinaryString(file)：读取文件并将一个二进制字符串保存在result属性中。
4.readAsArrayBuffer(file)：读取文件并将一个包含文件人容的ArrayBuffer保存在result属性中.
FileReader也有对应的状态监听
事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
接下来,就用FileReader也实现一遍图片预览
var img = document.getElementById("im");
var up = document.getElementById("up");
up.onchange = function() {
var fr = new FileReader();
fr.onloadend = function(ev) {
img.src = ev.target.result;
}
fr.readAsDataURL(this.files[0]);
}
给FileReader对象一个读取完成的方法,使用readAsDataURL会返回一个url,这个值就保存在事件对象的result里,img通过加载这个地址,完成图片的加载
4.本地上传进度
不能上传比较大的文件,如果太小的图片,直接就是100%了,我测试使用的是视频.用法跟之前差不多,只不过上传过程使用onprogress方法去监听过程
var img = document.getElementById("im");
var up = document.getElementById("up");
up.onchange = function() {
var fr = new FileReader();
fr.readAsDataURL(this.files[0]);
var total = this.files[0].size;
fr.onprogress = function(ev) {
console.log(ev.loaded / total);
}
}
ev.loaded是当前上传的大小,total是上传的时候获取的文件总大小.就能计算本地上传的进度,进度条的话可以用<label>把结果显示就可以了,这个效果可以参照QQ邮箱上传大文件时候那个进度条来做.
5.服务器上传进度
这部分需要显示的是上传后台的进度,跟之前本地的有点区别,这部分主要还是使用ajax进行上传状态的监控,先看JQ版
var img = document.getElementById("im");
var up = document.getElementById("up");
up.onchange = function() {
var formD = new FormData();
formD.append("file", this.files[0]);
$.ajax({
type: "POST",
url: "up.php",
data: formD,
processData: false,
//必须false才会自动加上正确的Content-Type
contentType: false,
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress", onprogress, false);
return xhr;
}
}
});
}
function onprogress(evt) {
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100 * loaded / tot); //已经上传的百分比
console.log(loaded, tot);
}
首先是formData,它可以模拟表单,使用formData能上传文件,在使用ajax上传的时候,先把图片加到formData对象里,通过对象传输图片
在ajax里,使用了好几个之前没用过的属性,第一个是processData,默认值是true,当data传来数据的时候,如果是一个对象,会处理转换成字符串,在这里,如果还使用true的话,会报错,所以设置成false.还有一个xhr,这个是需要返回一个XMLHttpRequest,jq的ajax没有progress,xhr能指定对应的XMLHttpRequest对象,所以需要给XMLHttpRequest加上progress方法,这样能监听进度,这样就能通过JQ完成上传的进度加载
