fileupload上傳預覽
① ASP.NET上傳圖片。上傳圖片前想先在窗口中生成圖片的預覽，最後再決定是否上傳。請高手提供下思路。
上傳之前預覽的是本地圖象！
也就是說，img的路徑設為file:///C:/xx.jpg，而上傳後的圖片是網路圖片，也就是說路徑不再是本地了！技術的難點在就這於如何取出圖片的長寬，並安比例顯示，這種情況下是有一定的難度的。否則是很容易的！
② fileupload 預覽
上傳圖片前預覽
上傳預覽我們可以這么寫 <script language="javascript">
function test(){
document.all.showimg.src=document.all.file1.value;
}
</script>
<img id="showimg">
<input type="file" id="file1" onchange="test()">保存為html文件,運行，一切正常。
當我們把上面的代碼原封不動的拷貝到aspx文件中,運行毫無反應，
原因在於 對安全的考慮限制image對本地文件的訪問(即使你在
aspx應用程序中用一個html頁面替換aspx頁面也無濟於事.)
google一下能用濾鏡的方式解決此問題.
在要顯示圖片的地方加上這段： <div id="divShow" style="FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);WIDTH:274px;HEIGHT:100px">sizingMethod：有三個選項
crop：剪切圖片以適應對象尺寸。
image：默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
scale：縮放圖片以適應對象的尺寸邊界
其中有一個src屬性是指向圖片路徑的(必選的);
可以試一下 <script language="javascript">
function ShowImage(path){
document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
}
</script>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<INPUT style="Z-INDEX: 101; LEFT: 232px; POSITION: absolute; TOP: 272px" type="file" onchange="ShowImage(this.value)">
<div id="divShow" style="FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);WIDTH:274px;HEIGHT:100px">
</form>
</body>瀏覽圖片沒問題，可是瀏覽小圖Div會小，瀏覽大圖可能會占據整個頁面,我們希望以固定的大小顯示所有的圖片
可以使用他的scale屬性.可是這個屬性有個問題，瀏覽大圖時，他會縮小原圖，瀏覽小圖時就慘了，他會放大小圖，
使小圖模糊不清。
我們添加個方法改變這種情況。 function setImg(o)
{
var width_img;
var height_img;
o.style.visibility = "visible";
width_img=o.offsetWidth;
height_img=o.offsetHeight;
var width=274; //預定義寬
var height=100; //預定義高
var ratW; //寬的縮小比例
var ratH; //高的縮小比例
var rat; //實際使用的縮小比例
if(width_img<width && height_img<height)
{
//如果比預定義的寬高小，原圖顯示。
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
return;
}else{
//如果大的化，要把 sizingMethod改成scale 如果屬性是image,不管怎麼改div的寬高，都不起作用
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
}
ratH=height/height_img;
ratW=width/width_img;
if(ratH<ratW) //選擇最小的作為實際的縮小比例
rat=ratH;
else
rat=ratW;
width_img=width_img * rat;
height_img=height_img * rat;
o.style.width=width_img;
o.style.height=height_img;
}修改ShowImage方法 function ShowImage(path){
//處理前是原圖，先將其隱藏，
document.all.divShow.style.visibility = "hidden";
document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
//過一小會獲取div的寬高.
setTimeout("setImg(document.all.divShow)",100);
}
以上在IE7中測試通過.
③ jquery file upload怎麼使用
使用方法：
1. 需要載入的js文件：
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
2. html代碼：
?
1
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
3. js代碼：
?
12345678910
$(function () {$('#fileupload').fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$('<p/>').text(file.name).appendTo(document.body);});}});});
3.1 顯示上傳進度條：
?
123456789
$('#fileupload').fileupload({progressall: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .bar').css('width',progress + '%');}});
3.2 需要一個<div>容器用來顯示進：
?
123
<div id="progress"><div class="bar" style="width: 0%;"></div></div>
4. API
4.1 Initialization：
在上傳按鈕上調用fileupload()方法;
示例：
$('#fileupload').fileupload();
4.2 Options :
1: url：請求發送的目標url
Type: string
Example: '/path/to/upload/handler.json'
2.Type: 文件上傳HTTP請求方式，可以選擇「POST」，「PUT」或者"PATCH",
默認"POST"
Type: string
Example: 'PUT'
3. dataType:希望從伺服器返回的數據類型，默認"json"
Type: string
Example: 'json'
4. autoUpload:默認情況下，只要用戶點擊了開始按鈕被添加至組件的文件會立即上傳。將autoUpload值設為true可以自動上傳。
Type: boolean
Default: true
5. acceptFileTypes：允許上傳的的文件類型
Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i
6. maxFileSize: 最大上傳文件大小
Example: 999000 (999KB) //單位：B
7. minFileSize:最小上傳文件大小
Example: 100000 (100KB) //單位：B
8.previewMaxWidth : 圖片預覽區域最大寬度
Example: 100 //單位：px
4.3 Callback Options:
使用方法一：函數屬性
實例：
?
123456789101112
$('#fileupload').fileupload({drop: function (e, data) {$.each(data.files, function (index, file) {alert('Dropped file: ' + file.name);});},change: function (e, data) {$.each(data.files, function (index, file) {alert('Selected file: ' + file.name);});}});
使用方法二：綁定事件監聽函數
實例：
?
123
$('#fileupload').bind('fileuploaddrop', function (e, data) {/* ... */}).bind('fileuploadchange', function (e, data) {/* ... */});
每個事件名稱都添加前綴：」fileupload」;
注意推薦使用第二種方法。
常用的回調函數：
1. add: 當文件被添加到上傳組件時被觸發
?
1
$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});
或者$('#fileupload').on('fileuploadadd', function (e, data) {/* ... */});
2. processalways: 當一個單獨的文件處理隊列結束（完成或失敗時）觸發
3. progressall: 全局上傳處理事件的回調函數
Example:
?
1234567
$('#fileupload').on('fileuploadprogressall', function (e, data) { //進度條顯示var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .progress-bar').css('width',progress + '%');});
4. fail : 上傳請求失敗時觸發的回調函數，如果伺服器返回一個帶有error屬性的json響應這個函數將不會被觸發。
5. done : 上傳請求成功時觸發的回調函數，如果伺服器返回一個帶有error屬性的json響應這個函數也會被觸發。
6. always : 上傳請求結束時（成功，錯誤或者中止）都會被觸發。
④ spring mvc word文件上傳之後可預覽的實現方法或者步驟
你好！
springmvc文件上傳
1.加入jar包：
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
lperson.java中加屬性，實現get ,set方法
private String photoPath;
2.創建WebRoot/upload目錄，存放上傳的文件
1 <sf:form id="p" action="saveOrUpdate"
2 method="post"
3 modelAttribute="person"
4 enctype="multipart/form-data">
5
6 <sf:hidden path="id"/>
7 name: <sf:input path="name"/><br>
8 age: <sf:input path="age"/><br>
9 photo: <input type="file" name="photo"/><br>
上面第9行文件上傳框，不能和實體對象屬性同名，類型不同
controller配置
1 12、文件上傳功能實現 配置文件上傳解析器
2 @RequestMapping(value={"/saveOrUpdate"},method=RequestMethod.POST)
3 public String saveOrUpdate(Person p,
4 @RequestParam("photo") MultipartFile file,
5 HttpServletRequest request
6 ) throws IOException{
7 if(!file.isEmpty()){
8 ServletContext sc = request.getSession().getServletContext();
9 String dir = sc.getRealPath(「/upload」); //設定文件保存的目錄
10
11 String filename = file.getOriginalFilename(); //得到上傳時的文件名
12 FileUtils.writeByteArrayToFile(new File(dir,filename), file.getBytes());
13
14 p.setPhotoPath(「/upload/」+filename); //設置圖片所在路徑
15
16 System.out.println("upload over. "+ filename);
17 }
18 ps.saveOrUpdate(p);
19 return "redirect:/person/list.action"; //重定向
20 }
3.文件上傳功能實現 spring-mvc.xml 配置文件上傳解析器
1 <!-- 文件上傳解析器 id 必須為multipartResolver -->
2 <bean id="multipartResolver"
3 class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
4 <property name="maxUploadSize" value=「10485760"/>
5 </bean>
6
7 maxUploadSize以位元組為單位：10485760 =10M id名稱必須這樣寫
1 映射資源目錄
2 <mvc:resources location="/upload/" mapping="/upload/**"/>
隨即文件名常用的三種方式：
文件上傳功能（增強：防止文件重名覆蓋）
fileName = UUID.randomUUID().toString() + extName;
fileName = System.nanoTime() + extName;
fileName = System.currentTimeMillis() + extName;
1 if(!file.isEmpty()){
2 ServletContext sc = request.getSession().getServletContext();
3 String dir = sc.getRealPath("/upload");
4 String filename = file.getOriginalFilename();
5
6
7 long _lTime = System.nanoTime();
8 String _ext = filename.substring(filename.lastIndexOf("."));
9 filename = _lTime + _ext;
10
11 FileUtils.writeByteArrayToFile(new File(dir,filename), file.getBytes());
12
13 p.setPhotoPath("/upload/"+filename);
14
15 System.out.println("upload over. "+ filename);
16 }
圖片顯示 personList.jsp
1 <td><img src="${pageContext.request.contextPath}${p.photoPath}">${p.photoPath}</td>