uploadify struts 2画像アップロードを実現
uploadifyは海外からの優秀なjQueryアップロードプラグインで、主な機能は大量にファイルをアップロードし、進捗表示があります.
2つのバージョンが含まれています.1つはFlashで、1つはHTML 5です.Flashバージョンの使用方法について説明します
1、Uploadify Zipをダウンロードする
2、パッケージを解凍し、次のファイルをWebサイトのフォルダにアップロードします.
jquery.uploadify.min.js
uploadify.css
uploadify-cancel.png
uploadify.swf
3、uploadifyページを使用してもjQueryライブラリを導入することを忘れないでください
4、ページに以下のファイルを導入する
5、ページにfile inputを追加する
6、初期化uploadify
7、最終ページは次のようになります
詳細uploadifyプロパティは、「」を参照してください.http://www.uploadify.com/documentation/
アップロードファイルの処理Actionは省略して、必要なのはソースコードをダウンロードすることができます:download
効果は図のようになります.
作者:itmyhome
転載は出典を明記してください.http://blog.csdn.net/itmyhome1990/article/details/44062283
2つのバージョンが含まれています.1つはFlashで、1つはHTML 5です.Flashバージョンの使用方法について説明します
1、Uploadify Zipをダウンロードする
2、パッケージを解凍し、次のファイルをWebサイトのフォルダにアップロードします.
jquery.uploadify.min.js
uploadify.css
uploadify-cancel.png
uploadify.swf
3、uploadifyページを使用してもjQueryライブラリを導入することを忘れないでください
4、ページに以下のファイルを導入する
<script type="text/javascript" src="uploadify/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
5、ページにfile inputを追加する
<input type="file" name="file_upload" id="file_upload" />
6、初期化uploadify
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'fileUploadAction.action'
// Put your options here
});
});
7、最終ページは次のようになります
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>uploadify</title>
<script type="text/javascript" src="uploadify/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
</body>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify( {
'swf' : 'uploadify/uploadify.swf',
'uploader' : 'fileUploadAction.action', // Action
'fileObjName' : 'file', //
'buttonText' : ' ', //
});
});
</script>
</html>
詳細uploadifyプロパティは、「」を参照してください.http://www.uploadify.com/documentation/
アップロードファイルの処理Actionは省略して、必要なのはソースコードをダウンロードすることができます:download
効果は図のようになります.
作者:itmyhome
転載は出典を明記してください.http://blog.csdn.net/itmyhome1990/article/details/44062283