弄了一天的圖片上傳(也就是在表單里面顯示圖片,預(yù)覽圖片)，顯示,通過網(wǎng)上找資料終于弄好了。現(xiàn)在整理一下，貼到這，下次要再用到也方便查詢了。。。
傳入后臺處理，使用struts2
struts2中的struts.xml 配置
Java代碼
- //uploadFile.js
- Ext.onReady(function(){
- varfileForm= new Ext.form.FormPanel({
- title: "" ,
- renderTo: "fileUpload" ,
- fileUpload: true ,
- layout: "form" ,
- id: "fileUploadForm" ,
- items:[{
- id: 'upload' ,
- name: 'upload' ,
- inputType: "file" ,
- fieldLabel: '上傳圖片' ,
- xtype: 'textfield' ,
- anchor: '40%'
- },{
- xtype: 'box' ,
- id: 'browseImage' ,
- fieldLabel: "預(yù)覽圖片" ,
- autoEl:{
- width: 300 ,
- height: 350 ,
- tag: 'img' ,
- //type:'image',
- src:Ext.BLANK_IMAGE_URL,
- style: 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' ,
- complete: 'off' ,
- id: 'imageBrowse'
- }
- }],
- //form事件
- listeners:{
- 'render' :function(f){
- //
- this .form.findField( 'upload' ).on( 'render' ,function(){
- //通過change事件,圖片也動態(tài)跟蹤選擇的圖片變化
- Ext.get( 'upload' ).on( 'change' ,
- function(field,newValue,oldValue){
- //得到選擇的圖片路徑
- varurl= 'file://'
- +Ext.get( 'upload' ).dom.value;
- //alert("url="+url);
- //是否是規(guī)定的圖片類型
- if (img_reg.test(url)){
- if (Ext.isIE){
- varimage=Ext.get( 'imageBrowse' ).dom;
- image.src=Ext.BLANK_IMAGE_URL; //覆蓋原來的圖片
- image.filters
- .item( "DXImageTransform.Microsoft.AlphaImageLoader" ).src=url;
- } //支持FF
- else {
- Ext.get( 'imageBrowse' ).dom.src=Ext
- .get( 'upload' ).dom.files
- .item( 0 ).getAsDataURL()
- }
- }
- }, this );
- }, this );
- }
- },
- buttons:[{
- text: "提交" ,
- name: "submit" ,
- handler:submit
- }]
- });
- //上傳圖片類型
- varimg_reg=/\.([jJ][pP][gG]){ 1 }$|\.([jJ][pP][eE][gG]){ 1 }$|\.([gG][iI][fF]){ 1 }$|\.([pP][nN][gG]){ 1 }$|\.([bB][mM][pP]){ 1 }$/
- });
- //上傳圖片到服務(wù)器，
- functionsubmit(){
- Ext.getCmp( "fileUploadForm" ).getForm().submit({
- url: "uploadAction.action" ,
- method: "POST" ,
- success:function(form,action){
- alert( "success" );
- },
- failure:function(form,action){
- alert( "failure" );
- }
- });
- }
傳入后臺處理，使用struts2
Java代碼
- package com.cocobra.action;
- import java.io.*;
- import java.util.Date;
- import java.util.UUID;
- import org.apache.struts2.ServletActionContext;
- import com.opensymphony.xwork2.ActionSupport;
- public class UploadAction extends ActionSupport{
- /**
- *
- */
- private static final long serialVersionUID=1L;
- private Fileupload;
- private StringuploadContentType;
- private StringuploadFileName; //fileName前面必須和uplaod一致,不然找不到文件
- public FilegetUpload(){
- return upload;
- }
- public void setUpload(Fileupload){
- this .upload=upload;
- }
- public StringgetUploadContentType(){
- return uploadContentType;
- }
- public void setUploadContentType(StringuploadContentType){
- this .uploadContentType=uploadContentType;
- }
- public StringgetUploadFileName(){
- return uploadFileName;
- }
- public void setUploadFileName(StringuploadFileName){
- this .uploadFileName=uploadFileName;
- }
- //上傳文件的文件名
- private StringgetFileExp(Stringname){
- int pos=name.lastIndexOf( "." );
- return name.substring(pos);
- }
- private static final int BUFFER_SIZE= 16 * 1024 ;
- public Stringexecute() throws Exception{
- Dated= new Date();
- System.out.println( "uploadFileName=" + this .uploadFileName);
- //upload--wapps下面的文件夾,用來存放圖片
- StringtoSrc=ServletActionContext.getServletContext().getRealPath( "upload" )+ "/" +d.getTime()+getFileExp( this .uploadFileName); //使用時間戳作為文件名
- System.out.println( "toFile=" +toSrc);
- FiletoFile= new File(toSrc);
- writeFile( this .upload,toFile);
- return SUCCESS;
- }
- private static void writeFile(Filesrc,Filedst){
- System.out.println( "==文件寫入==" );
- try {
- InputStreamin= null ;
- OutputStreamout= null ;
- try {
- in= new BufferedInputStream( new FileInputStream(src),
- BUFFER_SIZE);
- out= new BufferedOutputStream( new FileOutputStream(dst),
- BUFFER_SIZE);
- byte []buffer= new byte [BUFFER_SIZE];
- while (in.read(buffer)> 0 ){
- out.write(buffer);
- }
- } finally {
- if ( null !=in){
- in.close();
- }
- if ( null !=out){
- out.close();
- }
- }
- } catch (Exceptione){
- e.printStackTrace();
- }
- System.out.println( "寫入成功！" );
- }
- }
struts2中的struts.xml 配置
Java代碼
- <actionname= "uploadAction" class = "com.cocobra.action.UploadAction" >
- <interceptor-refname= "fileUpload" >
- <!--攔截器strut2自帶的,指定上傳文件的格式,如果不符合規(guī)定，將會自動攔截下來-->
- <paramname= "allowedTypes" >image/bmp,image/png,image/gif,image/jpeg,image/jpg</param>
- <paramname= "maximumSize" > 20000000000 </param>
- </interceptor-ref>
- <interceptor-refname= "defaultStack" />
- <resultname= "success" >/index.jsp</result>
- </action>
2
頂
頂
0
踩
踩
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
