jquery文件上傳例子(兩種方式)

原創 violet84 2019-02-22 21:10

轉載地址：http://lihong11.iteye.com/blog/1832454

<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<title>ajaxFileUpload文件上傳例子1</title>

<script type="text/javascript" src="<%=baseURL%>/kinth/js/ajaxfileupload.js"></script>

<script type="text/javascript">

   var flag=0; //flag作用：分兩種情況提交信息，如果是修改操作，沒有修改上傳文件，只修改其他字段的信息時點保存也能提交信息

function uploadFile(){

$.ajaxFileUpload({

           url:baseURL+ "/fileCatalog.do?method=save",            //需要鏈接到服務器地址

       secureuri:true,

       fileElementId:'file',                        //文件選擇框的id屬性

       success: function(data, status){   

        var results = $(data).find('body').html();

        var obj = eval("("+results+")");

        $("#fileSize").val(obj.fileSize);

        $("#fileUrl").val(obj.fileUrl);

        $('#fileCatalogForm').submit();

       },error: function (data, status, e){

               showDialogWithMsg('ideaMsg','提示','文件錯誤！');

       }

       });

}

        

function getFileName(obj)

{

        flag=1;

    var pos = -1;

    if(obj.value.indexOf("/") > -1){

    pos = obj.value.lastIndexOf("/")*1;

}else if(obj.value.indexOf("\\") > -1){

    pos = obj.value.lastIndexOf("\\")*1;

}

   var fileName =  obj.value.substring(pos+1);

   $("#fileName").val(fileName);

      $('.files').text(fileName);

}


        function ev_save(){

          if(submitMyForm('fileCatalogForm')){

             if(flag==0){

                $('#fileCatalogForm').submit();

             }else{

              uploadFile();

             } 

           }           

         }


         function ev_back(){

window.location.href=baseURL+'/fileCatalog.do?method=list';

}

</script>

</head>

<body>

<html:form styleId="fileCatalogForm" action="/fileCatalog.do?method=save&fileFlag=true" method="post" enctype="application/x-www-form-urlencoded" style="text-align:left;">

<table>

<tr>

<td>附件上傳：</td>

<td style="text-align:left;"  id="fileTd">

<input type="file" name="file" id="file" onChange="getFileName(this);"  /><br />

</td>

<td colspan="2" class="tdr">

<ol  class=files>

<c:if test="${entity.resourceId != null && entity.resourceId != ''}"><li> ${entity.fileName}&nbsp;&nbsp;上傳成功</li></c:if>

</ol>

</td>

</tr> 

<c:if test="${entity.resourceId == null || entity.resourceId == ''}">

<input type="text" name="fileSize" id="fileSize" >

</c:if>

<input type="hidden" id="fileUrl" name="fileUrl" value="${entity.fileUrl}" 

</table>

</html:form>

</body>



<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<title>jqueryUploadify文件上傳例子2</title>

<script type="text/javascript" src="<%=baseURL %>/kinth/common/js/jquery.validate.js" ></script>

<!-- 附件上傳    -->

 

<link href="<%=baseURL%>/kinth/common/jqueryUpload/uploadify.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="<%=baseURL%>/kinth/common/jqueryUpload/swfobject.js"></script>

<script type="text/javascript" src="<%=baseURL%>/kinth/common/jqueryUpload/jquery.uploadify.v2.0.3.min.js"></script>

<script type="text/javascript">

        var flag=0;

        $(document).ready(function() {

            $("#files").uploadify({

                'uploader'       : '<%=baseURL%>/kinth/common/jqueryUpload/uploadify.swf',

                'script'         : '<%=baseURL%>/fileCatalog.do?method=fileUpload',

                'cancelImg'      : '<%=baseURL%>/kinth/common/jqueryUpload/cancel.png',

                'queueID'        : 'fileQueue',

                'scriptData'     :  {'resourceId' : $('#resourceId').val()},

                'auto'           : false,

                'multi'          : false,

                'buttonText'     : 'Brower file',                   

           onComplete: function (evt, queueID, fileObj, response, data) {

$('#fileUrl').attr("value",response);

      $('<li></li>').appendTo('.files').text(fileObj.name+"上傳成功");

$('#fileCatalogForm').submit();

      },

onSelect: function(evt,queueID, fileObj){

flag=1;

var filename = fileObj.name;

$('#fileName').attr("value",filename.substring(0,filename.lastIndexOf(".")));

$('#fileSize').attr("value",fileObj.size);

},

onError: function(a, b, c, d) {

alert("文件上傳失敗");

              }

            });


        });

        

        function myuploadifyUpload(){

  $('#files').uploadifyUpload();

} 

        

        function ev_save(){

          if(submitMyForm('fileCatalogForm')){

             if(flag==0){

              $('#fileCatalogForm').submit();

             }else{

              myuploadifyUpload();

             }

          }

        }

 </script>


</head>

<body>

<html:form styleId="fileCatalogForm" action="/fileCatalog.do?method=save" method="post" enctype="application/x-www-form-urlencoded" style="text-align:left;">

<table>

<tr>

<td>附件上傳：</td>

<td style="text-align:left;" >

   <input type="file" name="files" id="files" /><br />

   ${entity.fileName}

   <input type="hidden" id="fileUrl" name="fileUrl" value="${entity.fileUrl}" />  

   <div id="fileQueue"></div>

  <ol class=files></ol>

   <p>

  <a href="javascript:jQuery('#files').uploadifyClearQueue()">取消所有上傳</a>

   </p>

</td>

</tr> 

<c:if test="${entity.resourceId == null || entity.resourceId == ''}">

<input type="text" name="fileSize" id="fileSize" />

<input type="text" id="fileName" name="fileName" />

</c:if>

<input type="hidden" id="fileUrl" name="fileUrl" value="${entity.fileUrl}" 

</table>

</html:form>

</body>


package com.kinth.hddpt.file.action;


import java.io.File;

import java.io.FileNotFoundException;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import java.io.OutputStream;

import java.util.ArrayList;

import java.util.Calendar;

import java.util.Enumeration;

import java.util.Hashtable;

import java.util.List;


import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;


import net.sf.json.JSONArray;


import org.apache.commons.logging.Log;

import org.apache.commons.logging.LogFactory;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

import org.apache.struts.upload.FormFile;

import org.hibernate.criterion.MatchMode;

import org.hibernate.criterion.Order;

import org.hibernate.criterion.Restrictions;


import com.gdcn.bpaf.common.base.search.MyCriteria;

import com.gdcn.bpaf.common.base.search.MyCriteriaFactory;

import com.gdcn.bpaf.common.base.service.BaseService;

import com.gdcn.bpaf.common.helper.PagerList;

import com.gdcn.bpaf.common.helper.WebHelper;

import com.gdcn.bpaf.common.taglib.SplitPage;

import com.gdcn.bpaf.security.model.LogonVO;

import com.gdcn.components.appauth.common.helper.DictionaryHelper;

import com.kinth.common.base.action.BaseAction;

import com.kinth.hddpt.file.action.form.FileCatalogForm;

import com.kinth.hddpt.file.model.FileCatalog;

import com.kinth.hddpt.file.service.FileCatalogService;

import com.kinth.hddpt.file.util.MyZTreeNode;


/**

 * <p>

 * description: “文件上傳的Struts層請求處理類”

 * </p>

 * @date : 2013-1-14

 */

public class FileCatalogAction extends BaseAction<FileCatalog> {

@SuppressWarnings("unused")

private static Log log = LogFactory.getLog(FileCatalogAction.class); // 日誌記錄

private FileCatalogService fileCatalogService;

// 刪除記錄的同時刪除相應文件

public ActionForward fileDelete(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

throws Exception {

String[] id = request.getParameterValues("resourceId");


if (id != null && id[0].contains(",")) {

id = id[0].split(",");

}

String[] fileUrls = new String[id.length];

for (int j = 0; j < id.length; j++) {

fileUrls[j] = fileCatalogService.findObject(id[j]).getFileUrl();

if (!isEmpty(fileUrls[j])) {

// 如果該文件夾不存在則創建一個uptext文件夾

File fileup = new File(fileUrls[j]);

if (fileup.exists() || fileup != null) {

fileup.delete();

}

}


fileCatalogService.deleteObject(id[j]);

}

setAllActionInfos(request);

return list(mapping, form, request, response);

}


@Override

public ActionForward save(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

throws Exception {

String id = request.getParameter("resourceId");

Boolean fileFlag = Boolean.valueOf(request.getParameter("fileFlag"));

if(fileFlag != null && fileFlag == true){

return super.save(mapping, form, request, response);

}else{

String fileUrl = this.fileUpload(form, request, id, fileFlag);

response.setContentType("text/html");

       response.setCharacterEncoding("GBK");

   response.setHeader("Charset", "GBK");

   response.setHeader("Cache-Control", "no-cache");

   response.getWriter().write(fileUrl);

   response.getWriter().flush();

}

return null;

}


@SuppressWarnings("unchecked")

public String fileUpload(ActionForm form,HttpServletRequest request,String id,Boolean fileFlag) throws FileNotFoundException, IOException{

        request.setCharacterEncoding("GBK");

        

        String basePath = getServlet().getServletConfig().getServletContext().getRealPath("")+"/";

        String filePath = "uploads/"; // 獲取項目根路徑 ;

        

        /*註釋部分對應jquery upload uploadify插件的後臺代碼,只是還存在編碼問題，默認爲utf-8

String savePath = getServlet().getServletConfig().getServletContext().getRealPath(""); // 獲取項目根路徑

        savePath = savePath + "\\uploads\\";

        //讀取上傳來的文件信息

        Hashtable<String, FormFile> fileHashtable = form.getMultipartRequestHandler().getFileElements();

        Enumeration<String> enumeration = fileHashtable.keys();

        enumeration.hasMoreElements();

        String key = (String) enumeration.nextElement();

        

        FormFile formFile = (FormFile)fileHashtable.get(key);

        

        String filename = formFile.getFileName().trim(); //文件名

        filename = new EncodeChange().changeCode(filename);

        String filetype = filename.substring(filename.lastIndexOf(".") + 1);//文件類型

        savePath = savePath+filetype+"\\";

        System.out.println("path:"+savePath);

        String realPath = savePath +  filename; //真實文件路徑

        

        //如果該文件夾不存在則創建一個文件夾

        File fileup = new File(savePath);

        if(!fileup.exists()||fileup==null){

            fileup.mkdirs();

        }

        if (!filename.equals("")) {

            // 在這裏上傳文件

          InputStream is = formFile.getInputStream();

          OutputStream os = new FileOutputStream(realPath);

            int bytesRead = 0;

            byte[] buffer = new byte[8192];

            while ((bytesRead = is.read(buffer, 0, 8192)) != -1) {

                os.write(buffer, 0, bytesRead);

            }

            os.close();

            is.close();

            //如果是修改操作，則刪除原來的文件

            String id = request.getParameter("resourceId");

            if (!isEmpty(id)) {

              FileCatalog fileCatalog = fileCatalogService.findObject(id);

              String fileUrl = fileCatalog.getFileUrl();

              if (!isEmpty(fileUrl)) {

                File filedel = new File(fileUrl);

                if(filedel.exists()||filedel!=null){

                  filedel.delete();

                }

              }

              

              request.setAttribute("entity", fileCatalog);

           }

           

        response.getWriter().print(realPath);// 向頁面端返回結果信息

        }*/

       

// 讀取上傳來的文件信息

Hashtable<String, FormFile> fileHashtable = form.getMultipartRequestHandler().getFileElements();

Enumeration<String> enumeration = fileHashtable.keys();

enumeration.hasMoreElements();

String key = (String) enumeration.nextElement();


FormFile formFile = (FormFile) fileHashtable.get(key);


String filename = formFile.getFileName().trim(); // 文件名

String filetype = filename.substring(filename.lastIndexOf(".") + 1);// 文件類型

Integer fileSize = formFile.getFileSize();

filePath += Calendar.getInstance().get(Calendar.YEAR)+"/"+filetype+"/" ;

String realPath = basePath+filePath+filename;  // 真實文件路徑

if (!filename.equals("")) {

// 如果是修改操作，則刪除原來的文件

if (!isEmpty(id)) {

FileCatalog fileCatalog = fileCatalogService.findObject(id);

String fileUrl = fileCatalog.getFileUrl();

if (!isEmpty(fileUrl)) {

fileUrl = basePath + fileUrl;

File filedel = new File(fileUrl);

if (filedel.exists() || filedel != null) {

filedel.delete();

}

}

request.setAttribute("entity", fileCatalog);

}

// 如果該文件夾不存在則創建一個文件夾

File fileup = new File(basePath+filePath);

if (!fileup.exists() || fileup == null) {

fileup.mkdirs();

}

// 在這裏上傳文件

InputStream is = formFile.getInputStream();

OutputStream os = new FileOutputStream(realPath);

int bytesRead = 0;

byte[] buffer = new byte[8192];

while ((bytesRead = is.read(buffer, 0, 8192)) != -1) {

os.write(buffer, 0, bytesRead);

}

os.close();

is.close();

}

filePath += filename;

String result = "{\"fileName\":\""+filename+"\",\"fileType\":\""+filetype+"\",\"fileSize\":"+fileSize+",\"fileUrl\":\""+filePath+"\"}";

   return result;

}


public FileCatalogService getFileCatalogService() {

return fileCatalogService;

}


public void setFileCatalogService(FileCatalogService fileCatalogService) {

this.fileCatalogService = fileCatalogService;

}

}



package com.kinth.hddpt.file.action;

import java.io.File;

import java.io.IOException;

import java.util.Iterator;

import java.util.List;


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;


/*

jqueryUploadify文件上傳servlet類,寫了此類就可以不用到action中寫fileUpload方法了,只是不能把上傳的文件保存到數據庫中


這種方法記得配置web.xml哦，

如

<!--附件上傳開始-->

&nbsp;

<servlet>

&nbsp;&nbsp;

<servlet-name>Upload</servlet-name>

&nbsp;&nbsp;

<servlet-class>

com.kinth.hddpt.file.action.UploadController

</servlet-class>


</servlet>

&nbsp;

<servlet-mapping>


<servlet-name>Upload</servlet-name>

&nbsp;&nbsp;

<url-pattern>/servlet/fileUpload</url-pattern>

&nbsp;

</servlet-mapping>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<!--附件上傳結束--> 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

 

*/

public class UploadController extends HttpServlet {


public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setCharacterEncoding("utf-8");

        

String savePath = this.getServletConfig().getServletContext().getRealPath("");

savePath = savePath + "/uploads/resourses/";


DiskFileItemFactory fac = new DiskFileItemFactory();

ServletFileUpload upload = new ServletFileUpload(fac);

upload.setHeaderEncoding("utf-8");

List fileList = null;

try {

fileList = upload.parseRequest(request);

} catch (FileUploadException ex) {

ex.printStackTrace();

}

Iterator<FileItem> it = fileList.iterator();

String name = "";

String extName = "";

String category = "";


while (it.hasNext()) {

FileItem item = it.next();

if (item.isFormField()) {

if ("category".equals(item.getFieldName())) {

category = item.getString("utf-8");

}

} else if (!item.isFormField()) {

name = item.getName();

if (name == null || name.trim().equals("")) {

continue;

}

// 擴展名格式：

if (name.lastIndexOf(".") >= 0) {

extName = name.substring(name.lastIndexOf("."));

}

savePath = savePath  + category + "/";

File f1 = new File(savePath);

if (!f1.exists()) {

f1.mkdirs();

}

File saveFile = new File(savePath + name);

try {

item.write(saveFile);

} catch (Exception e) {

e.printStackTrace();

}

}

}

response.getWriter().print(name + " 上傳成功");

}

}






發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Ansible5：常用模塊

tianjun1990 2019-02-23 00:16:07

.NetCore上傳多文件的幾種示例

神牛步行3 2019-02-23 00:05:30

FTP應用

ITMONITOR 2019-02-22 23:52:13

curl命令詳解

yjyygywcw 2019-02-22 23:40:31

Hadoop學習--通過API上傳文件--day04

zhicx 2019-02-22 23:15:46

Hadoop學習--上傳文件指定複製因子--day04

zhicx 2019-02-22 23:15:45

ABAP 編程技術小點

sap淺夏 2019-02-22 23:13:46

Hadoop之HDFS回收站

wangwei4078 2019-02-22 23:04:33

php文件上傳處理

鑫全 2019-02-22 23:01:44

jQuery 關於ajaxfileupload.js插件的逐步解析（ajaxfileupload.js第二彈）

我不會抽菸 2019-02-22 22:51:09

java成長之路

淘寶王 2019-02-22 22:37:16

PHP文件上傳大小限制修改

Alexsname 2019-02-22 22:18:06

上傳文件

wanglogn 2019-02-22 22:05:16

用Linux Shell實現FTP上傳文件並確認是否成功功能

Andy_Leung1988 2019-02-22 21:49:12

微信小程序小技巧系列《二》show內容展示，上傳文件編碼問題

小程序聯盟 2019-02-22 21:32:59