jquery ajaxfileupload非同期アップロードプラグインの使用詳細
7330 ワード
プロジェクトの需要のため、画像をアップロードするには、非同期でファイルをアップロードする必要があります。アップロードの過程でファイルを検証する必要があります。ルールは以下の通りです。幅と高さ
度は200より大きく、幅は2より小さく、サイズは2 Mより小さい。
ここで使っているのはAjaxFileUploaderというコンポーネントです。サーバーはStrutsを使ってファイルを処理します。
例:
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
度は200より大きく、幅は2より小さく、サイズは2 Mより小さい。
ここで使っているのはAjaxFileUploaderというコンポーネントです。サーバーは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", //
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];
//
String fileName = userBean.getUserId()+"."+hz;
return fileName;
}
/**
*
*/
public String getSavePath(){
return ServletActionContext.getServletContext().getRealPath("upload/photos");
}
/**
*
* : 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を使ってファイルをアップロードします。次に、画像を切り取る方法を紹介します。以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。