`

$.ajaxFileUpload 文件上传

 
阅读更多

$.ajaxFileUpload用于文件的上传.

图片上传:

	//上传图片
	$("#buttonUpload").click(function(){	
		$.ajaxFileUpload({  
		url:basepath + 'ImageUpload',  //调用方法
	    secureuri:false,
	    fileElementId:'actImageUp', //界面id 
	    dataType: 'json',  
	    success: function (data, status) {     
	    	if (data.state == "SUCCESS") {
	    		// 上传图片成功    		
	    		//$("#noticePic").val(data.src);
	    		$("#noticePic").val(data.imageName);
	    		
	    	} else {
	    		$('#result').html('上传图片失败, 失败原因:'+data.state); 
	    	}
	    },  
	    error: function (data, status, e) {
	        $('#result').html('上传图片失败');  
	    }  
	});
	});

 jsp:

   加入:

     <script type="text/javascript" src="<%=basePath%>/PUBLISH/scripts/jquery.ajaxfileupload.js"></script>

<div id="result" style="FONT:12px 宋体"></div>
					<input type="file" name="actImageUp" id="actImageUp" style="width: 63px;"/>
					<input name=noticePic id="noticePic"  readonly="readonly" style="width:133px;"  ></input>

 

servelt:

package com.fjxhx.business.notice.servlet;

import java.io.BufferedInputStream;  
import java.io.BufferedOutputStream;  
import java.io.File;  
import java.io.FileOutputStream;  
import java.io.IOException;  
import java.util.Date;  
import java.util.regex.Matcher;  
import java.util.regex.Pattern;  
  
import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
  
import org.apache.commons.fileupload.FileItemIterator;  
import org.apache.commons.fileupload.FileItemStream;  
import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
import org.apache.commons.fileupload.servlet.ServletFileUpload;  
import org.apache.commons.fileupload.util.Streams; 

public class ImageUpload extends HttpServlet {

	public ImageUpload() {
		super();
	}

	public void destroy() {
		super.destroy();
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		String realDir = request.getSession().getServletContext().getRealPath(
				"");
		String contextpath = request.getContextPath();
		String basePath = request.getScheme() + "://" + request.getServerName()
				+ ":" + request.getServerPort() + contextpath + "/";

		try {
			String filePath = "../uploadfiles";
			String realPath = realDir + "/" + filePath;
			System.out.println(realPath);
			//判断路径是否存在,不存在则创建  
			File dir = new File(realPath);
			if (!dir.isDirectory())
				dir.mkdir();

			if (ServletFileUpload.isMultipartContent(request)) {

				DiskFileItemFactory dff = new DiskFileItemFactory();
				dff.setRepository(dir);
				dff.setSizeThreshold(1024000);
				ServletFileUpload sfu = new ServletFileUpload(dff);
				FileItemIterator fii = null;
				fii = sfu.getItemIterator(request);
				String title = ""; //图片标题  
				String url = ""; //图片地址  
				String fileName = "";
				String state = "SUCCESS";
				String realFileName = "";
				while (fii.hasNext()) {
					FileItemStream fis = fii.next();

					try {
						if (!fis.isFormField() && fis.getName().length() > 0) {
							fileName = fis.getName();
							Pattern reg = Pattern
									.compile("[.]jpg|png|jpeg|gif$");
							Matcher matcher = reg.matcher(fileName);
							if (!matcher.find()) {
								state = "请上传:jpg/png/jpeg/gif等类型图片!";
								break;
							}
							realFileName = new Date().getTime()
									+ fileName.substring(fileName
											.lastIndexOf("."), fileName
											.length());
							url = realPath + "/" + realFileName;

							BufferedInputStream in = new BufferedInputStream(
									fis.openStream());//获得文件输入流  
							FileOutputStream a = new FileOutputStream(new File(
									url));
							BufferedOutputStream output = new BufferedOutputStream(
									a);
							Streams.copy(in, output, true);//开始把文件写到你指定的上传文件夹  
						} else {
							String fname = fis.getFieldName();

							if (fname.indexOf("pictitle") != -1) {
								BufferedInputStream in = new BufferedInputStream(
										fis.openStream());
								byte c[] = new byte[10];
								int n = 0;
								while ((n = in.read(c)) != -1) {
									title = new String(c, 0, n);
									break;
								}
							}
						}

					} catch (Exception e) {
						e.printStackTrace();
					}
				}
				response.setStatus(200);
				String retxt = "{imageName:'"+realFileName+"',src:'" + basePath + filePath + "/"
						+ realFileName + "', state:'"+state+"'}";
				
				response.getWriter().print(retxt);
			}
		} catch (Exception ee) {
			ee.printStackTrace();
		}

	}

	public void init() throws ServletException {
		// Put your code here  
	}
}

 导入js文件:

 

分享到:
评论

相关推荐

    ajaxfileupload.js用于文件上传

    ajaxfileupload.js用于文件上传

    ajaxFileUpload上传文件时无返回结果,调整函数后出现syntaxError :unexpected

    在使用AjaxFileUpload进行文件上传时,可能会遇到一些常见的问题,比如“无返回结果”或者在尝试解决问题后出现“syntaxError: unexpected”的错误提示。这个情况通常与JavaScript语法错误、服务器端响应格式、...

    ajaxfileupload.js文件下载

    此为前端进行文件上传,使用Ajax方式提交的js插件,使用方便简洁,开发很高效。

    springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项

    本篇文章将详细讲解如何利用EasyUI的`$.ajaxFileUpload`插件与SpringMVC结合,实现无刷新的文件上传,并着重强调在实现过程中需要注意的关键点。 首先,EasyUI的`filebox`组件是一个用于文件选择和上传的控件,它...

    使用ajaxFileUpload.js上传文件

    `AjaxFileUpload.js`是一个JavaScript库,它允许我们实现异步(Ajax)文件上传,无需刷新页面,提供了更为友好的用户体验。本篇文章将深入探讨`AjaxFileUpload.js`的工作原理、使用方法及其相关知识点。 `...

    上传文件 commons-fileupload-1.1.jar jquery.ajaxfileupload.js 以及demo

    本篇文章将详细讲解标题和描述中提到的两个关键组件:`commons-fileupload-1.1.jar` 和 `jquery.ajaxfileupload.js`,以及它们在实现文件上传中的作用。 首先,`commons-fileupload-1.1.jar` 是Apache Commons ...

    AJAXFileUpload ajax 异步文件上传 进度条

    AJAXFileUpload是一种基于AJAX技术的异步文件上传组件,它允许用户在不刷新页面的情况下上传文件,并且可以实时显示上传进度,提供良好的用户体验。本文将深入探讨AJAXFileUpload的工作原理、实现方式以及其在实际...

    jQuery实现文件编码成base64并通过AJAX上传的方法

    如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload。 如何能达到灵活的程度呢,能像普通的AJAX提交表单数据那样将文件看成是普通表单参数来对待就好了。 灵光一闪,...

    ajaxfileupload.js完整使用全套(带对应jquery+demo)

    `ajaxfileupload.js`是一个JavaScript库,用于实现异步文件上传功能,避免了传统文件上传时页面刷新的问题。它与jQuery的结合使得文件上传更加简便、高效。 首先,我们来理解`ajaxfileupload.js`的核心概念。这个...

    ajaxFileUpload

    **AjaxFileUpload** 是一个JavaScript库,主要用于实现无刷新的文件上传功能,尤其适用于上传图片。这个库在前端处理上提供了高效且用户友好的体验,因为它允许用户在不重新加载整个网页的情况下完成文件上传操作。...

    AjaxFileUpload实现文件异步上传(功能实现代码).rar

    AjaxFileUpload实现文件异步上传(功能... $.ajaxFileUpload({  url:"/form/file_parse.htm",  secureuri:false,  fileElementName:'upload-excel-file',  dataType: 'json',  success: function(data, status){

    Zepto.ajaxFileUpload:zepto 的文件上传库

    Zepto.ajax文件上传 zepto 的文件上传库 如何使用 Zepto.ajaxFileUpload(settings); settings为上传参数,除Zepto默认设置外,需要以下元素 String fileElementId:要上传的输入元素的id 数组数据:要上传的数据,...

    ajaxfileupload

    ajaxfileupload AJAX文件上传

    方便自己下载的ajaxfileupload.js备份

    其次,`ajaxfileupload.js`是主要的文件,它是一个专门用于文件上传的插件,基于jQuery构建。这个插件允许用户在不刷新页面的情况下,通过Ajax技术上传图片。异步上传意味着用户可以选择文件后,后台可以开始上传...

    解决ajaxfileupload.js在IE9无效

    用ajax的ajaxfileupload.js插件上传文件发现不支持IE9, 后来改了文件里的一些代码后可以了。 就拿出来共享。。。

    ajaxfileupload.js

    ajaxfileupload单文件上传,

    input file选择文件之后自动上传(样式自定义美化)

    在JavaScript或jQuery中,`$.ajaxFileUpload` 是一个非官方但常用的插件,它扩展了jQuery的`$.ajax`方法,专门用于处理文件上传。使用这个插件,你可以方便地实现异步文件上传,同时处理上传进度、错误和成功回调。...

    文件上传FileAjaxUpload.js 文件

    $.ajaxFileUpload({ url: base+'/user/upload/picture.shtml', //用于文件上传的服务器端请求地址 type: 'post', secureuri: false, //是否需要安全协议,一般设置为false contentType : "application/x-...

Global site tag (gtag.js) - Google Analytics