2. 程式人生 > >jquery+ajax+servlet實現無重新整理圖片上傳

jquery+ajax+servlet實現無重新整理圖片上傳

阿新 • • 發佈：2019-01-14
需要藉助ajaxfileupload.js來實現ajax圖片上傳功能。
html部分：
<body>
      <input id="img" type="file" name="img">//id和name屬性必須都有且同名。。。
      <input type="button" onclick="ajaxFileUpload()" value="upload"/>
      <span id="filespan"></span>
</body>
js部分：
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
    <script type="text/javascript" src="js/ajaxfileupload.js"></script>
    <script type="text/javascript">
       function ajaxFileUpload()
               {
                  $.ajaxFileUpload
                     (
                       {
                            url:'upload', //你處理上傳檔案的服務端
                            secureuri:false,
                            fileElementId:'img',//name和id的名字
                            dataType: 'text',//返回值型別，可以是個簡單的text
                            success: function (data){
                                    $('#filespan').text(data);
                            }
                        });
                 }
     </script>
伺服器端程式碼：
package web;


import java.io.*;
import java.util.List;


import javax.servlet.*;
import javax.servlet.http.*;
//使用fileupload元件
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;


public class Upload extends HttpServlet {


public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
// step1,建立DiskFileItemFactory物件
DiskFileItemFactory dfif = new DiskFileItemFactory();
// step2,建立一個解析器
ServletFileUpload sfu = new ServletFileUpload(dfif);
// step3,解析,解析器會分析InputStream，然後將解析的結果封裝到相應的FileItem
// 物件裡面（一個表單域對應於一個FileItem）
try {
// 只需要呼叫FileItem物件的方法就可以獲得表單中的資料
List<FileItem> items = sfu.parseRequest(request);
for (int i = 0; i < items.size(); i++) {
FileItem item = items.get(i);
ServletContext sctx = getServletContext();
String path = sctx.getRealPath("upload");
String fileName = item.getName();
File file = new File(path + File.separator + "pic"
+ File.separator + fileName);
item.write(file);
}
// json物件
// out.println("{'file_info':'上傳成功'}");
//text返回值
out.println("上傳成功");
} catch (Exception e) {
System.out.println("upload出問題了");
e.printStackTrace();
}


out.close();
}


}

相關推薦

jquery+ajax+servlet實現無重新整理圖片上傳

需要藉助ajaxfileupload.js來實現ajax圖片上傳功能。 html部分： <body>       <input id="img" type="file" name="img">//id和name屬性必須都有且同名。。。       <input type="but

jQuery + ajax + ashx實現無重新整理檔案上傳

主要分享的是jQuery + ajax的資料提交技巧，至於是不是.NET框架關係不大，大家可以用自己所用的框架處理上傳操作。 前臺介面程式碼： <form id="form1" action="#" runat="server" enctype="multipart

PHP Ajax JavaScript 實現 無重新整理附件上傳

普通表單 前端頁面 後臺處理 帶有檔案的表單 重新整理方式 前端介面 後臺頁面 無重新整理方式 總結 對一個網站而言，有一個基本的不可缺少的功能，那就是檔案上傳。使用PHP預壓來實現檔案上傳可謂是有得天獨厚的優勢的，那麼今天，就

PHP+jQuery+Ajax單（多）圖片上傳

近日寫的一個銷售管理系統中，需要使用者上傳產品的圖片，找了好多外掛，用起來都挺麻煩的而且還不好改，最後找到一篇用php和ajax做圖片上傳的，感覺程式碼挺簡單的而且改起來很容易，轉發到此處與各位分享一下： 我們在本文中用到一個Ajax表單提交外掛：jqery.

AjaxUpLoad.js實現無重新整理檔案上傳

string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + no

SpringMVC結合ajaxfileupload.js實現ajax無重新整理檔案上傳

一、spring mvc配置 1、web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xm

tp5+ajax+jq實現無重新整理分頁

tp5框架裡面自帶有panigate()+rende()的方法可以超簡單的實現分頁，但是就是看著一直要重新整理很不爽，所以找了網上的好多程式碼，終於找到了一個邏輯簡單的無重新整理分頁，以下是我更改適合之後實現的效果 程式碼裡面有詳細註釋了，就不多說了，說明一下分頁查詢的原

js-jquery+ajax+servlet 實現jsp頁面登入檢查

初學jsp首先要練習登入功能，今天學習了使用servlet完成登入檢查。 效果： 在登入頁面反覆輸入錯誤密碼，頁面不會重新整理。而是將表單內容通過js中的ajax提交到servlet中進行檢查，根據其返回值確定使用者是否登入成功。 準備： 我使用的IDE是 Intel

使用js和jquery實現點選圖片上傳及預覽

//上傳頭像 $(".avator-btn-fake").click(function(){ $("#upload").click(); }); $("#upload").change(function(){ var

asp.net ajax 和 asp.net 2.0中的fileupload合力打造無重新整理檔案上傳控制元件

{20        bool fileOK =false;21        //獲取根檔案絕對路徑22string path = Server.MapPath("~/UpLoad/");23        //如上傳了檔案，就判斷檔案格式24        FileUpload FU = FileUplo

jquery+ajax+struts實現非同步重新整理

1. 由於 非同步刷新技術這麼火，所以 探究玩一下；     在 jquery  中 有專門為 ajax 而設的 方法和            首先就是 匯入 struts的jar包+json.js+

用ajax.NET 實現無重新整理投票、評論

 C# 中建立新的 ASP.NET 專案，再新增引用 AJAX.dll 檔案。唯一的額外配置步驟是在 <system.web> 元素中（位於 web.config 檔案中）新增以下程式碼。 <configuration> <system.

[asp.net] ajax無重新整理檔案上傳與FormData使用介紹

前端主要進行瀏覽器類別判斷，如果是chrome瀏覽器，就使用ajax檔案上傳方式，如果時ie或者其他瀏覽器，就採用傳統的表單上傳檔案。通常我們提交表單時，會將form中的所有表單元素的name和value組成一個queryString，這就是為什麼表單元素可以沒有Id但是不能

用ajax技術實現 無重新整理實現使用者登入

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="logon.ascx.cs" Inherits="userControl_logon"%><script language="javascript" type="text/

ajax+php無重新整理檔案上傳(ajaxuploadfile)

檔案上傳的表單格式 <form id="uploadform" enctype="multipart/form-data" name="uploadform" method="post" > <input id="fileT

ASP.NET Core 簡單實現七牛圖片上傳（FormData 和 Base64）

private stream public 圖片 ASP.NET Core 簡單實現七牛圖片上傳（FormData 和 Base64）七牛圖片上傳 SDK（.NET 版本）：https://developer.qiniu.com/kodo/sdk/1237/csharpUpoladServic

Android簡單實現將手機圖片上傳到server中

sdk etc mov 創建 ast bmi 以及 lena ews 在本例中。將會簡單的實現安卓手機將圖片上傳到server中。本例使用到了 server端：PHP+APACHE 客戶端：JAVA 先簡單實現一下server端的上傳並測試上傳

html+php實現無刷新上傳文件

簡單 upload post move play llb cti == none 親測好用！！！代碼示例是上傳excel html代碼 <form id="uploadForm" class="picForm" action="finance.php?act=exce

from表單實現無跳轉上傳文件，接收頁面後臺數據

spl white lis not left alt tro pos ftp 　　實現無跳轉發送表單數據、文件，並能接收後臺返回的數據。 　　主要技術要點： 　　1、form表單添加target屬性，指定一個iframme的name；form表單提交後在iframe內嵌窗口

用原生JS實現多張圖片上傳及預覽功能（相容IE8）

最近需要做一個圖片上傳預覽的功能（相容IE8-11、chrome、firefox等瀏覽器），網上現有的檔案上傳元件（如webuploader）總是會遇到一些相容性問題。於是我參考了一些博文（連結找不到了⊙o⊙…），自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能：