jquery.fileupload使用例子java

2019-12-12 22:28:53

開發的時候需要使用jquery.fileupload外掛，那麼如何在struts中使用呢

1

需要的css樣式和js檔案

2

jsp頁面資訊如下，整個頁面資訊

<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8" import="java.io.*"%>

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

<!DOCTYPE HTML>

<html>

<head>

<meta

content="initial-scale=1.0,user-scalable=no, minimum-scale=1,maximum-scale=1,width=device-width"

name="viewport">

</head>

<body>

<div>

</div>

<span class="btn btn-success fileinput-button"> <span>檔案上傳</span> <input

id="fileupload" type="file" name="file" multiple> </span>

</div>

</script>

</script>

</script>

</script>

</script>

</script>

</script>

</script>

</script>

</script>

</script>

/*global window, $ */

$(function() {

'use strict';

var url = window.location.hostname == 'blueimp.github.io' ? '//jquery-file-upload.appspot.com/'

: 'user.action?methods=editimg', uploadButton = $('<button/>')

.addClass('btn btn-primary').prop('disabled', true).text(

'Processing...').on('click', function() {

var $this = $(this), data = $this.data();

$this.off('click').text('正在上傳').on('click', function() {

$this.remove();

data.abort();

});

data.submit().always(function() {

$this.remove();

});

$('#fileupload').fileupload({

url : url,

dataType : 'json',

autoUpload : false,

acceptFileTypes : /(.|/)(gif|jpe?g|png)$/i,

maxFileSize : 5000000, // 5 MB

disableImageResize : /Android(?!.*Chrome)|Opera/

.test(window.navigator.userAgent),

previewMaxWidth : 100,

previewMaxHeight : 100,

previewCrop : true

}).on(

'fileuploadadd',

function(e, data) {

data.context = $('<div/>').appendTo('#files');

$.each(data.files, function(index, file) {

var node = $('<p/>').append(

$('<span/>').text(file.name));

if (!index) {

node.append('<br>').append(

uploadButton.clone(true).data(data));

}

node.appendTo(data.context);

});

}).on('fileuploadprocessalways',function(e, data) {

var index = data.index, file = data.files[index], node = $(data.context.children()[index]);

if (file.preview) {

node.prepend('<br>').prepend(file.preview);

}

if (file.error) {

node.append('<br>').append(

$('<span/>').text(

file.error));

}

if (index + 1 === data.files.length) {

data.context.find('button').text('上傳').prop(

'disabled', !!data.files.error);

}

}).on('fileuploadprogressall', function(e, data) {

var progress = parseInt(data.loaded / data.total * 100, 10);

$('#progress .progress-bar').css('width', progress + '%');

}).on('fileuploaddone',function(e, data) {

var result = data.result.code;

if(result=='1'){

globe.lvToast(false, "影象上傳成功!", LT_LOADING_CLOSE);

setTimeout(function() {

//window.location.href = "index.action";

}, 2000);

}else{

globe.lvToast(false, data.msg, LT_LOADING_CLOSE);

}

}).on('fileuploadfail',

function(e, data) {

globe.lvToast(false, '頭像上傳失敗', LT_LOADING_CLOSE);

}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');

});

</script>

</body>

</html>

3

這裡特別注意檔名稱，容易出錯的地方

4

後台處理上傳圖片的方法，使用的是struts2處理

5

對應前端的檔名name="file"

6

struts2已經處理了請求，我們之間用就可以了

public String saveattach() {

try {

BufferedImage bi = ImageIO.read(file);

if (bi == null) {

return "0";

}

} catch (IOException e) {

return "0";

}

String realpath = ServletActionContext.getServletContext().getRealPath("/images/");

if (!new File(realpath).exists()) {

new File(realpath).mkdir();

}

String[] typechoose = fileFileName.split(".");

int ichoose = typechoose.length;

String type = ichoose > 1 ? typechoose[ichoose - 1] : "";

if (type.toLowerCase().equals("jpg")

|| type.toLowerCase().equals("gif")

|| type.toLowerCase().equals("jpeg")

|| type.toLowerCase().equals("png")) {

SimpleDateFormat smat = new SimpleDateFormat("yyyyMMddHHmmss");

String newfilname = smat.format(new Date()) + "." + type;

String path = realpath + "/" + newfilname;

FileUtil.saveFile(path, file);

return "/images/touxiang/"+newfilname;

} else {

return "0";

}

7

其中saveFile方法程式碼如下

public static void saveFile(String savePath, File upload) {

try {

InputStream in = null;

OutputStream out = null;

in = new FileInputStream(upload);

out = new FileOutputStream(savePath);

int readed = 0;

byte[] buffer = new byte[1024];

while ((readed = in.read(buffer, 0, 1024)) != -1) {

out.write(buffer, 0, readed);

}

out.flush();

out.close();

in.close();

} catch (FileNotFoundException e) {

e.printStackTrace();

} catch (IOException e) {

e.printStackTrace();

}

8

實現效果如下

jquery.fileupload使用例子java

1

2

3

4

5

6

7

8

熱門文章