jquery ajaxfileupload異步上傳插件使用詳解
由于項目需求在上傳頭像是需要使用異步上傳文件,在上傳的過程中需要對文件進(jìn)行校驗:規(guī)則如下:寬度和高
度大于200,寬高比要小于2,大小小于2M。
我這里使用的是AjaxFileUploader這個組件,服務(wù)器使用Struts處理文件。
實例:
<form action="" id="imageForm" enctype="multipart/form-data" method="POST"> <input type="file" name="userPhoto" id="userPhoto"> <input type="button" value="上傳" id="shangchuan"> </form>
這里需要引入兩個js文件:jQuery、ajaxfileUpload
<script type="text/javascript" src="${basePath }/resource/js/plugin/jquery-1.6.min.js"></script>
<script type="text/javascript" src="${basePath }/resource/js/grzx/ajaxfileupload.js"></script>
js文件:
//上傳頭像
$("#shangchuan").click(function(){
var file = $("#userPhoto").val();
if(file==""){
alert("請選擇上傳的頭像");
return;
}
else{
//判斷上傳的文件的格式是否正確
var fileType = file.substring(file.lastIndexOf(".")+1);
if(fileType!="png"&&fileType!="jpg"){
alert("上傳文件格式錯誤");
return;
}
else{
var url = "/symh/user/uploadPhoto_uploadPhoto.action?nowtime="+new Date().getTime();
$.ajaxFileUpload({
url:url,
secureuri:false,
fileElementId:"userPhoto", //file的id
dataType:"text", //返回數(shù)據(jù)類型為文本
success:function(data,status){
if(data=="1"){
alert("請上傳寬度大于200像素和高度大于200像素的圖片");
}
else if(data=="2"){
alert("請上傳寬高比不超過2的圖片");
}
else if(data=="3"){
alert("請上傳文件大小不大于2M的圖片");
}
else{
$("#uploadImage").hide();
$("#srcImg").attr("src",data);
$("#previewImg").attr("src",data);
$("#cutImage").show();
$("#bigImage").val(data);
cutImage(); //截取頭像
}
}
})
}
}
})
后臺處理程序:UploadPhotoAction.Java
public class UploadPhotoAction {
private File userPhoto;
private String userPhotoContentType;
private String userPhotoFileName;
public File getUserPhoto() {
return userPhoto;
}
public void setUserPhoto(File userPhoto) {
this.userPhoto = userPhoto;
}
public String getUserPhotoContentType() {
return userPhotoContentType;
}
public void setUserPhotoContentType(String userPhotoContentType) {
this.userPhotoContentType = userPhotoContentType;
}
public String getUserPhotoFileName() {
return userPhotoFileName;
}
public void setUserPhotoFileName(String userPhotoFileName) {
this.userPhotoFileName = userPhotoFileName;
}
/**
* 用戶上傳圖像
*/
public void uploadPhoto(){
try {
HttpServletResponse response = (HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);
response.setCharacterEncoding("UTF-8");
FileInputStream fis1 = new FileInputStream(getUserPhoto()); //保存文件
FileInputStream fis2 = new FileInputStream(getUserPhoto()); //判斷文件
int i = this.checkImage(fis2);
if(i==1){
response.getWriter().print("1");
}
else if(i==2){
response.getWriter().print("2");
}
else if(i==3){
response.getWriter().print("3");
}
else { //文件正確、上傳
//得到文件名
String photoName = getPhotoName(getUserPhotoFileName());
FileOutputStream fos = new FileOutputStream(getSavePath()+"\\"+photoName);
byte[] buffer = new byte[1024];
int len = 0;
while ((len = fis1.read(buffer))>0) {
fos.write(buffer,0,len);
}
//處理文件路徑,便于在前臺顯示
String imagPathString = dealPath(getSavePath()+"\\"+photoName);
response.getWriter().print(imagPathString);
}
}
catch (IOException e) {
e.printStackTrace();
}
}
/**
* 重新命名頭像名稱:用戶編號+頭像后綴
*/
public String getPhotoName(String photoName){
//獲取用戶
HttpServletRequest request = (HttpServletRequest) ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
UserBean userBean = (UserBean) request.getSession().getAttribute("userBean");
//獲取文件的后綴
String[] strings = photoName.split("\\.");
String hz = strings[1];
//構(gòu)建文件名
String fileName = userBean.getUserId()+"."+hz;
return fileName;
}
/**
* 獲取上傳路徑
*/
public String getSavePath(){
return ServletActionContext.getServletContext().getRealPath("upload/photos");
}
/**
* 判斷上傳的頭像是否合法
* 規(guī)則:寬度和高度大于200、寬高比小于2、大小小于2M
* 寬度或者高度<200 返回1
* 寬高比>2 返回2
* 大小大于2M 返回 3
* 正確 返回 0
*/
public int checkImage(FileInputStream fis){
try {
BufferedImage image = ImageIO.read(fis);
double width = image.getWidth();
double height = image.getHeight();
if(width<200||height<200){
return 1;
}
else if(width/height>2){
return 2;
}
else if(fis.available()/(1024*1024)>2){
return 3;
}
else {
return 0;
}
} catch (IOException e) {
e.printStackTrace();
}
return 1;
}
/**
* 處理頭像路徑
*/
public String dealPath(String path){
String[] strings = path.split("\\\\");
String string2 = "/";
for (int i = strings.length-4; i < strings.length; i++) {
if(i==strings.length-1){
string2 = string2+strings[i];
}
else {
string2 = string2+strings[i]+"/";
}
}
return string2;
}
}
這里就介紹使用ajaxFileUpload異步上傳文件。下面將介紹如何截取頭像(類似于QQ上傳頭像)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery ajaxfileupload異步上傳插件
- jQuery插件ajaxFileUpload異步上傳文件
- PHP結(jié)合jQuery插件ajaxFileUpload實現(xiàn)異步上傳文件實例
- jquery中的ajax異步上傳
- jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹
- JQuery插件ajaxfileupload.js異步上傳文件實例
- jQuery插件ajaxFileUpload實現(xiàn)異步上傳文件效果
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- jquery之a(chǎn)jaxfileupload異步上傳插件(附工程代碼)
- jquery+ajax實現(xiàn)異步上傳文件顯示進(jìn)度條
相關(guān)文章
jQuery插件擴(kuò)展實例【添加回調(diào)函數(shù)】
這篇文章主要介紹了jQuery插件擴(kuò)展的方法,結(jié)合實例形式分析了jQuery插件添加回調(diào)函數(shù)與事件觸發(fā)機制的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
formStorage 基于jquery的一個插件(存儲表單中元素的狀態(tài)到本地)
原理很簡單,通過本地存儲機制(userData或者localStorage),存儲表單中元素的狀態(tài)到本地. 需要時可以把所存儲的狀態(tài)還原到表單元素上2012-01-01
淺談jquery.form.js的ajaxSubmit和ajaxForm的使用
下面小編就為大家?guī)硪黄獪\談jquery.form.js的ajaxSubmit和ajaxForm的使用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
詳解jQuery移動頁面開發(fā)中的ui-grid網(wǎng)格布局使用
這篇文章主要介紹了jQuery移動頁面開發(fā)中的ui-grid網(wǎng)格布局使用,以講解多列頁面布局方式為主,需要的朋友可以參考下2015-12-12

