uploadify文件格式_jsp頁面實現圖片預覽截取和上傳

㈠ jsp頁面實現圖片預覽，截取和上傳

比較常用，而且簡單易用的jquery-uploadify插件，支持帶進度的多線程上傳

用到的是flash的跨域上傳模型，這里不用深究

基本文件大致包括

jquery-x.x.x.js

jquery.uploadify.x.js

uploadify.swf

uploadify.css

使用方式：

	$(function(){
		$("#fileId").uploadify({
			width:42,
			height:32,
			swf:'js/uploadify.swf',
			uploader:'upload.do;jsessionid=<%=session.getId()%>',
			buttonImage:'image/movetophone_white.png',
			fileSizeLimit:2048,
			fileObjName:"imgFile",
			method:'post',
			removeCompleted:true,
			fileTypeExts:"*.gif;*.jpg;*.png;*.jpeg;*.bmp",
			onSelectError:function(file,errorCode,errorMsg){
				alert("文件過大");
			},
			onUploadStart:function(file){
				
			},
			onUploadSuccess:function(file,data,response){
				alert("上傳完成");
			},
			onUploadError:function(file,errorCode,errorMsg){
				alert(errorMsg);
			}
		});
	});
	<inputtype="file"id="fileId"/>

另，工程中需要引入commons-fileupload的包。

㈡ jquery Uploadify上傳文件

Uploadify是JQuery的一個上傳插件，實現的效果非常不錯，帶進度顯示。不過官方提供的實例時php版本的，本文將詳細介紹Uploadify在Aspnet中的使用，您也可以點擊下面的鏈接進行演示或下載。

首先按下面的步驟來實現一個簡單的上傳功能。

1 創建Web項目，命名為JQueryUploadDemo，從官網上下載最新的版本解壓後添加到項目中。

2 在項目中添加UploadHandler.ashx文件用來處理文件的上傳。

3 在項目中添加UploadFile文件夾，用來存放上傳的文件。

進行完上面三步後項目的基本結構如下圖:

㈢ jquery 多個上傳文件教程

jquery 實現多個上傳文件教程：

首先創建解決方案,添加jquery的js和一些資源文件(如圖片和進度條顯示等):

jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css

1、頁面的基本代碼如下

這里用的是aspx頁面(html也是也可的)

頁面中引入的js和js函數如下：

<scriptsrc="js/jquery-1.3.2.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.uploadify.v2.1.0.js"type="text/javascript"></script>
<scriptsrc="js/jquery.uploadify.v2.1.0.min.js"type="text/javascript"></script>
<scriptsrc="js/swfobject.js"type="text/javascript"></script>
<linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/>

</script>

js函數：

<scripttype="text/javascript">
$(document).ready(function(){

$("#uploadify").uploadify({
'uploader':'image/uploadify.swf',//uploadify.swf文件的相對路徑，該swf文件是一個帶有文字BROWSE的按鈕，點擊後淡出打開文件對話框
'script':'Handler1.ashx',//script：後台處理程序的相對路徑
'cancelImg':'image/cancel.png',
'buttenText':'請選擇文件',//瀏覽按鈕的文本，默認值：BROWSE。
'sizeLimit':999999999,//文件大小顯示
'floder':'Uploader',//上傳文件存放的目錄
'queueID':'fileQueue',//文件隊列的ID，該ID與存放文件隊列的div的ID一致
'queueSizeLimit':120,//上傳文件個數限制
'progressData':'speed',//上傳速度顯示
'auto':false,//是否自動上傳
'multi':true,//是否多文件上傳
//'onSelect':function(e,queueId,fileObj){
//alert("唯一標識:"+queueId+"
"+
//"文件名："+fileObj.name+"
"+
//"文件大小："+fileObj.size+"
"+
//"創建時間："+fileObj.creationDate+"
"+
//"最後修改時間："+fileObj.modificationDate+"
"+
//"文件類型："+fileObj.type);

//}
'onQueueComplete':function(queueData){
alert("文件上傳成功！");
return;
}

});
});

頁面中的控制項代碼：

<body>
<formid="form1"runat="server">
<divid="fileQueue">
</div>
<div>
<p>
<inputtype="file"name="uploadify"id="uploadify"/>
<inputid="Button1"type="button"value="上傳"onclick="javascript:$('#uploadify').uploadifyUpload()"/>
<inputid="Button2"type="button"value="取消"onclick="javascript:$('#uploadify').uploadifyClearQueue()"/>
</p>
</div>
</form>
</body>

函數主要參數：

$(document).ready(function(){
$('#fileInput1').fileUpload({
'uploader':'uploader.swf',//不多講了
'script':'/AjaxByJQuery/file.do',//處理Action
'cancelImg':'cancel.png',
'folder':'',//服務端默認保存路徑
'scriptData':{'methed':'uploadFile','arg1','value1'},
//向後台傳遞參數,methed,arg1為參數名,uploadFile,value1為對應的參數值,服務端通過request["arg1"]
'buttonText':'UpLoadFile',//按鈕顯示文字,不支持中文,解決方案見下
//'buttonImg':'圖片路徑',//通過設置背景圖片解決中文問題,就是把背景圖做成按鈕的樣子
'multi':'true',//多文件上傳開關
'fileExt':'*.xls;*.csv',//文件過濾器
'fileDesc':'.xls',//文件過濾器詳解見文檔
'onComplete':function(event,queueID,file,serverData,data){
//serverData為伺服器端返回的字元串值
alert(serverData);
}
});
});

後台一般處理文件：

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.IO;
usingSystem.Net;
usingSystem.Web;
usingSystem.Web.Services;
namespacefupload
{
///<summary>
///Handler1的摘要說明
///</summary>
publicclassHandler1:IHttpHandler
{

publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";

HttpPostedFilefile=context.Request.Files["Filedata"];//對客戶端文件的訪問

stringuploadPath=HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\";//伺服器端文件保存路徑

if(file!=null)
{
if(!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);//創建服務端文件夾
}

file.SaveAs(uploadPath+file.FileName);//保存文件
context.Response.Write("上傳成功");
}

else
{
context.Response.Write("0");
}

}

publicboolIsReusable
{
get
{
returnfalse;
}
}
}
}

以上方式基本可以實現多文件的上傳，大文件大小是在控制在10M以下/。

㈣ java ssh框架中怎麼上傳圖片

package com.lilian.framework.servlet;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.lilian.business.common.model.CmResource;
import com.lilian.framework.utils.FileLoadUtil;

/**
* 通用上傳組件(可以使用uploadify等上傳組件上傳資源)
* @author Ares
*/
public class FileUploadServlet extends HttpServlet {

private static final long serialVersionUID = -7933946015372885027L;

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doProcess(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doProcess(request, response);
}

public void doProcess(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html; charset=utf-8");
// 保存後的文件名
String bornName = ""; //源文件名
String fileName = ""; //文件名
String fileFormat = ""; //文件格式
short fileType = 1; //文件類型
Long fileSize = 0l; //文件大小
String hostAddr = ""; //主機地址(主機IP/域名)
String virtualAddr = ""; //虛擬地址(相對路徑)
String urlPath = ""; //URL地址(訪問路徑)

// 通過時間戳散列目錄存儲
SimpleDateFormat formatter = new SimpleDateFormat("yyyyMM/ddHH/");
Date curDate = new Date(System.currentTimeMillis()); // 獲取當前時間
String fileFolder = formatter.format(curDate);

hostAddr = FileLoadUtil.getKeyValueByKeyName("file.upload.hostadd");

// virtualAddr = FileLoadUtil.getKeyValueByKeyName("file.upload.virtualdir.image") + fileFolder;
String uploadType = request.getParameter("uploadType");
if(uploadType!=null && !uploadType.equals("")){
if(uploadType.equals("1")){
virtualAddr = FileLoadUtil.getKeyValueByKeyName("file.upload.virtualdir.image") + fileFolder;
}else if(uploadType.equals("2")){
virtualAddr = FileLoadUtil.getKeyValueByKeyName("file.upload.virtualdir.config") + fileFolder;
}else{
response.getWriter().print("文件上傳失敗，上傳類型不存在！");
return;
}
}else{
response.getWriter().print("文件上傳失敗，沒有上傳類型！");
return;
}

// urlPath = SystemLocation.getWebrootpath() + "/" + virtualAddr;
urlPath = hostAddr + virtualAddr;

// 文件存放的目錄
// String savePath = FileUtil.getUploadFilePath();
String savePath = FileLoadUtil.getKeyValueByKeyName("file.upload.path") + virtualAddr;

// 這里還可以添加有業務規則的文件目錄，比如允許每個用戶有自己的上傳文件目錄
File tempDirPath = new File(savePath);
if (!tempDirPath.exists()) {
tempDirPath.mkdirs();
}

// 創建磁碟文件工廠
DiskFileItemFactory fac = new DiskFileItemFactory();
// 創建servlet文件上傳組件
ServletFileUpload upload = new ServletFileUpload(fac);
// 設置charset為utf-8,上傳中文文件名不會產生亂碼
upload.setHeaderEncoding("UTF-8");

// 文件列表
List fileList = null;
// 解析request從而得到前台傳過來的文件
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
ex.printStackTrace();
return;
}

// 遍歷從前台得到的文件列表
Iterator<FileItem> it = fileList.iterator();
List<CmResource> cmResourceList = new ArrayList<CmResource>();
while (it.hasNext()) {
FileItem item = (FileItem) it.next();
if (!item.isFormField()) {
fileName = item.getName();
fileSize = item.getSize();
bornName = fileName.substring(0, fileName.lastIndexOf("."));
if (fileName == null || fileName.trim().equals("")) {
continue;
}

// 擴展名格式：
if (fileName.lastIndexOf(".") >= 0) {
fileFormat = fileName.substring(fileName.lastIndexOf(".")+1);
}

File file = null;
do {
// 生成文件名：
fileName = UUID.randomUUID().toString() + "." + fileFormat;
file = new File(savePath + fileName);
} while (file.exists());

File saveFile = new File(savePath + fileName);
try {
item.write(saveFile);
} catch (Exception e) {
e.printStackTrace();
}

System.out.println("***************************************************************");
System.out.println("bornName: " + bornName);
System.out.println("fileName: " + fileName);
System.out.println("fileFormat: " + fileFormat);
System.out.println("fileType: " + fileType);
System.out.println("fileSize: " + fileSize.longValue());
System.out.println("hostAdd: " + hostAddr);
System.out.println("virtualAddr: " + virtualAddr);
System.out.println("urlPath: " + urlPath);
System.out.println("imageURL: " + hostAddr + virtualAddr + fileName);
System.out.println("***************************************************************");

CmResource cmResource = new CmResource();
cmResource.setBornName(bornName);
cmResource.setFileName(fileName);
cmResource.setFileFormat(fileFormat);
cmResource.setFileType(fileType);
cmResource.setFileSize(fileSize);
cmResource.setHostAddr(hostAddr);
cmResource.setVirtualAddr(virtualAddr);
cmResource.setUrlPath(urlPath);
cmResourceList.add(cmResource);
}
}

// 將文件的相對路徑+源名稱+文件大小返回給response流。
request.setAttribute("cmResourceList", cmResourceList);
response.setContentType("text/html; charset=utf-8");
response.getWriter().print("文件上傳成功！");
}
}
萬能通用

㈤用jquery uploadify 上傳文件得到選擇的文件路徑！

fileObj.name得到的只是文件的名稱
你將IE的安全性調到最低，他得到的就是路徑，現在IE9對這個路徑進行了加密，所以得到的都是名字，就算的到路徑也是一個虛擬的路徑，最好將文件上傳，取文件上傳後的路徑進行操作。

㈥ jquery uploadify上傳如何設置文件大小不超過2M

版本 uploadfy3

fileSizeLimit : 2048,
具體：
jsp頁面：
jQuery("#uploadify").uploadify({
。。。。
buttonText : 'SELECT', // The text to use for the browse button
checkExisting : false, // The path to a server-side script that checks for existing files on the server
debug : false, // Turn on swfUpload debugging mode
fileObjName : 'Filedata', // The name of the file object to use in your server-side script
fileSizeLimit : 2048, // The maximum size of an uploadable file in KB (Accepts units B KB MB GB if string, 0 for no limit)
fileTypeDesc : fileTypeDesc,

版本：jquery.uploadify.v2.1.0.min
'sizeLimit' : 2048*1024,

jQuery("#uploadify").uploadify({

。。。。。

'auto' : false,
'multi' : true,
'queueSizeLimit' : queueSizeLimit,
'buttonText' : 'BROWSE',
'sizeLimit' : 2048*1024,

㈦有哪些好用的 jQuery 圖片上傳插件

1、uploadify
它是針對jQuery的免費文件上傳插件，可以輕松將單個或多個文件上傳到網站上，可控制並發上傳的文件數，通過介面參數和CSS控制外觀。Web伺服器需支持flash和後端開發語言。

2、FancyUpload
它是一個由CSS和XHTML編寫樣式的Ajax文件上傳工具，安裝簡便，伺服器獨立，由MooTools模塊驅動，可以在任何現代瀏覽器上使用。

3、Aurigma Upload Suite(Image Uploader)
這是一個不限大小，不限格式的文件/圖片批量上傳工具，是收費控制項。它支持雲端存儲和客戶端文件處理，支持斷點續傳，穩定可靠。從8.0.8開始，Image Uploader將名稱改為"Aurigma Upload Suite"。

導航:首頁 > 文件教程 > uploadify文件格式

uploadify文件格式

與uploadify文件格式相關的資料

友情鏈接