POST数据,有几种方式可供选择:
1、使用表单进行图片上传
<form id="upload-image" name="upload-image" action="./uplaodImage.php" enctype="multipart/form-data" method="post"> <input type="file" name="image" class="webuploader-element-invisible" id="channel-pic" accept="image/*"> <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);" for="channel-pic"> </label> <input type="submit" value="确认上传图片" class="upload-image-btn" id="uploadImageBtn"/> <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);" class="upload-image-btn" for="uploadImageBtn"></label> </form>
图片直接被上传到action属性所对应的后端
2、JavaScript实现图片上传及预览
JavaScript实现图片上传基于html5的新增属性FileReader。下面进行详细说明:
2.1、input标签
<input type="file" />
file值定义输入字段和“浏览”按钮,供文件上传使用.效果如下图:
2.2、html5新增API:FileReader
FileReader用来把文件读入内存,并且异步读取文件中的数据。可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.
2.2.1、FileReader对象的实例所拥有的方法
拥有以下4个方法:
abort、readAsBinaryString、readAsDataURL、readAsText
这4个方法中abort用来中断读取:
var reader = new FileReader(); reader.abort();//无参数
其他3个用来读取文件.3个读取文件的方法,都不会返回读取结果,读取结果存储在result属性中.使用方法如下:
a)、readAsBinaryString
将文件读取为二进制码,可以用来传输到后端并存储.使用方法如下:
var file = document.getElementById('uploadImage').files[0]; var reader = new FileReader(); reader.readAsBinaryString(file); reader.onload = function(e){ console.log(this.result);//读取结果存储在result属性中 }
b)、readAsDataURL
将文件读取为DataURL,以base64码进行读取,可以用来本地预览图片.使用方法如下:
var file = document.getElementById('uploadImage').files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ console.log(this.result);//读取结果存储在result属性中 }
c)、readAsText
将文件读取为文本,以’utf-8’进行读取.使用方法如下:
var file = document.getElementById('uploadImage').files[0]; var reader = new FileReader(); reader.readAsText(file); reader.onload = function(e){ console.log(this.result);//读取结果存储在result属性中 }
2.2.2、FileReader对象的实例所拥有的事件
拥有以下6个事件
onabort、onerror、onload、onloadend、onloadstart、onprogress
a)、onabort事件在中断读取文件时触发,使用方法如下:
var file = document.getElementById('uploadImage').files[0]; var reader = new FileReader(); reader.onabort = function(e){ console.log(this.result);//读取结果存储在result属性中 } reader.readAsDataURL(file);
b)、onerror事件在读取出错时触发,使用方法如下:
var file = document.getElementById('uploadImage').files[0]; var reader = new FileReader(); reader.onerror = function(e){ console.log(this.result);//读取结果存储在result属性中 } reader.readAsDataURL(file);
c)、onload事件在读取成功完成时触发,使用方法如下:
var file = document.getElementById('uploadImage').files[0]; var reader = new FileReader(); reader.onload = function(e){ console.log(this.result);//读取结果存储在result属性中 } reader.readAsDataURL(file);
d)、onloadend事件在读取完成时触发,读取可能成功也可能失败,使用方法如下:
var file = document.getElementById('uploadImage').files[0]; var reader = new FileReader(); reader.onloadend = function(e){ console.log('已经读取完成',this.result);//读取结果存储在result属性中 } reader.readAsDataURL(file);
e)、onloadstart事件在读取开始时触发,使用方法如下:
var file = document.getElementById('uploadImage').files[0]; var reader = new FileReader(); reader.onloadstart = function(e){ console.log('开始读取',this.result);//读取结果为空 } reader.readAsDataURL(file);
f)、onprogress事件在读取过程中触发,使用方法如下:
var file = document.getElementById('uploadImage').files[0]; var reader = new FileReader(); reader.onprogress = function(e){ console.log('读取过程中',this.result);//读取结果存储在result属性中,执行一次 } reader.readAsDataURL(file);
2.3、完整实现图片本地预览并上传方法
3、使用jquery.form.js上传图片
3.1上传API:ajaxSubmit
3.2、完整实现选中图片本地预览并立即上传
<html> <head> <title>jquery.form.js上传图片效果演示</title> <script src="./jquery.js"></script> <script src="./jquery.form.js"></script> </head> <body> <img src="" class="imageContent"/> <form action="./image" method="post" enctype="multipart/form-data" id="testUpload"> <input type="file" name="image" accept="image/*"/> </form> <script> var $input = $('input[name=image]'); $input.on('change',function(e){ if(window.FileReader){ var fr = new FileReader(); fr.onloadend = function(ret){ $('.imageContent').attr('src',ret.target.result); $('.imageContent').width('200px') $('.imageContent').height('200px') } fr.readAsDataURL($(e.target.files)[0]); } $('#testUpload').ajaxSubmit({ type: 'post', dataType: 'json', url: $('#testUpload').attr('action'), success: function (ret) { alert('上传图片成功!'); }, error:function(e){ alert('上传图片失败!'); } }) return false; }); </script> </body> </html>
点击查看源码