㈠ jsp页面实现图片预览,截取和上传
比较常用,而且简单易用的jquery-uploadify插件,支持带进度的多线程上传
用到的是flash的跨域上传模型,这里不用深究
基本文件大致包括
jquery-x.x.x.js
jquery.uploadify.x.js
uploadify.swf
uploadify.css
使用方式:
$(function(){$("#fileId").uploadify({width:42,height:32,swf:'js/uploadify.swf',uploader:'upload.do;jsessionid=<%=session.getId()%>',buttonImage:'image/movetophone_white.png',fileSizeLimit:2048,fileObjName:"imgFile",method:'post',removeCompleted:true,fileTypeExts:"*.gif;*.jpg;*.png;*.jpeg;*.bmp",onSelectError:function(file,errorCode,errorMsg){alert("文件过大");},onUploadStart:function(file){},onUploadSuccess:function(file,data,response){alert("上传完成");},onUploadError:function(file,errorCode,errorMsg){alert(errorMsg);}});});<inputtype="file"id="fileId"/>
另,工程中需要引入commons-fileupload的包。
㈡ jquery Uploadify上传文件
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载。
首先按下面的步骤来实现一个简单的上传功能。
1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中。
2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。
3 在项目中添加UploadFile文件夹,用来存放上传的文件。
进行完上面三步后项目的基本结构如下图:
㈢ jquery 多个 上传文件教程
jquery 实现多个上传文件教程:
首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):
jquery-1.3.2.min.jsjquery.uploadify.v2.1.0.jsjquery.uploadify.v2.1.0.min.jsswfobject.jsuploadify.css
1、页面的基本代码如下
这里用的是aspx页面(html也是也可的)
页面中引入的js和js函数如下:
<scriptsrc="js/jquery-1.3.2.min.js"type="text/javascript"></script><scriptsrc="js/jquery.uploadify.v2.1.0.js"type="text/javascript"></script><scriptsrc="js/jquery.uploadify.v2.1.0.min.js"type="text/javascript"></script><scriptsrc="js/swfobject.js"type="text/javascript"></script><linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/></script>
js函数:
<scripttype="text/javascript">$(document).ready(function(){$("#uploadify").uploadify({'uploader':'image/uploadify.swf',//uploadify.swf文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框'script':'Handler1.ashx',//script:后台处理程序的相对路径'cancelImg':'image/cancel.png','buttenText':'请选择文件',//浏览按钮的文本,默认值:BROWSE。'sizeLimit':999999999,//文件大小显示'floder':'Uploader',//上传文件存放的目录'queueID':'fileQueue',//文件队列的ID,该ID与存放文件队列的div的ID一致'queueSizeLimit':120,//上传文件个数限制'progressData':'speed',//上传速度显示'auto':false,//是否自动上传'multi':true,//是否多文件上传//'onSelect':function(e,queueId,fileObj){//alert("唯一标识:"+queueId+""+//"文件名:"+fileObj.name+""+//"文件大小:"+fileObj.size+""+//"创建时间:"+fileObj.creationDate+""+//"最后修改时间:"+fileObj.modificationDate+""+//"文件类型:"+fileObj.type);//}'onQueueComplete':function(queueData){alert("文件上传成功!");return;}});});
页面中的控件代码:
<body><formid="form1"runat="server"><divid="fileQueue"></div><div><p><inputtype="file"name="uploadify"id="uploadify"/><inputid="Button1"type="button"value="上传"onclick="javascript:$('#uploadify').uploadifyUpload()"/><inputid="Button2"type="button"value="取消"onclick="javascript:$('#uploadify').uploadifyClearQueue()"/></p></div></form></body>
函数主要参数:
$(document).ready(function(){$('#fileInput1').fileUpload({'uploader':'uploader.swf',//不多讲了'script':'/AjaxByJQuery/file.do',//处理Action'cancelImg':'cancel.png','folder':'',//服务端默认保存路径'scriptData':{'methed':'uploadFile','arg1','value1'},//向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"]'buttonText':'UpLoadFile',//按钮显示文字,不支持中文,解决方案见下//'buttonImg':'图片路径',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子'multi':'true',//多文件上传开关'fileExt':'*.xls;*.csv',//文件过滤器'fileDesc':'.xls',//文件过滤器详解见文档'onComplete':function(event,queueID,file,serverData,data){//serverData为服务器端返回的字符串值alert(serverData);}});});
后台一般处理文件:
usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.IO;usingSystem.Net;usingSystem.Web;usingSystem.Web.Services;namespacefupload{///<summary>///Handler1的摘要说明///</summary>publicclassHandler1:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentType="text/plain";HttpPostedFilefile=context.Request.Files["Filedata"];//对客户端文件的访问stringuploadPath=HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\";//服务器端文件保存路径if(file!=null){if(!Directory.Exists(uploadPath)){Directory.CreateDirectory(uploadPath);//创建服务端文件夹}file.SaveAs(uploadPath+file.FileName);//保存文件context.Response.Write("上传成功");}else{context.Response.Write("0");}}publicboolIsReusable{get{returnfalse;}}}}
以上方式基本可以实现多文件的上传,大文件大小是在控制在10M以下/。
㈣ java ssh框架中怎么上传图片
package com.lilian.framework.servlet;import java.io.File;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.Date;import java.util.Iterator;import java.util.List;import java.util.UUID;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;import com.lilian.business.common.model.CmResource;import com.lilian.framework.utils.FileLoadUtil;/** * 通用上传组件(可以使用uploadify等上传组件上传资源) * @author Ares */public class FileUploadServlet extends HttpServlet {private static final long serialVersionUID = -7933946015372885027L;public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doProcess(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doProcess(request, response);}public void doProcess(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html; charset=utf-8");// 保存后的文件名String bornName = "";//源文件名String fileName = "";//文件名String fileFormat = "";//文件格式short fileType = 1;//文件类型Long fileSize = 0l;//文件大小String hostAddr = "";//主机地址(主机IP/域名)String virtualAddr = "";//虚拟地址(相对路径)String urlPath = "";//URL地址(访问路径)// 通过时间戳散列目录存储SimpleDateFormat formatter = new SimpleDateFormat("yyyyMM/ddHH/");Date curDate = new Date(System.currentTimeMillis());// 获取当前时间String fileFolder = formatter.format(curDate);hostAddr = FileLoadUtil.getKeyValueByKeyName("file.upload.hostadd");//virtualAddr = FileLoadUtil.getKeyValueByKeyName("file.upload.virtualdir.image") + fileFolder;String uploadType = request.getParameter("uploadType");if(uploadType!=null && !uploadType.equals("")){if(uploadType.equals("1")){virtualAddr = FileLoadUtil.getKeyValueByKeyName("file.upload.virtualdir.image") + fileFolder;}else if(uploadType.equals("2")){virtualAddr = FileLoadUtil.getKeyValueByKeyName("file.upload.virtualdir.config") + fileFolder;}else{response.getWriter().print("文件上传失败,上传类型不存在!");return;}}else{response.getWriter().print("文件上传失败,没有上传类型!");return;}//urlPath = SystemLocation.getWebrootpath() + "/" + virtualAddr;urlPath = hostAddr + virtualAddr;// 文件存放的目录//String savePath = FileUtil.getUploadFilePath();String savePath = FileLoadUtil.getKeyValueByKeyName("file.upload.path") + virtualAddr;// 这里还可以添加有业务规则的文件目录,比如允许每个用户有自己的上传文件目录File tempDirPath = new File(savePath);if (!tempDirPath.exists()) {tempDirPath.mkdirs();}// 创建磁盘文件工厂DiskFileItemFactory fac = new DiskFileItemFactory();// 创建servlet文件上传组件ServletFileUpload upload = new ServletFileUpload(fac);// 设置charset为utf-8,上传中文文件名不会产生乱码upload.setHeaderEncoding("UTF-8");// 文件列表List fileList = null;// 解析request从而得到前台传过来的文件try {fileList = upload.parseRequest(request);} catch (FileUploadException ex) {ex.printStackTrace();return;}// 遍历从前台得到的文件列表Iterator<FileItem> it = fileList.iterator();List<CmResource> cmResourceList = new ArrayList<CmResource>();while (it.hasNext()) {FileItem item = (FileItem) it.next();if (!item.isFormField()) {fileName = item.getName();fileSize = item.getSize();bornName = fileName.substring(0, fileName.lastIndexOf("."));if (fileName == null || fileName.trim().equals("")) {continue;}// 扩展名格式:if (fileName.lastIndexOf(".") >= 0) {fileFormat = fileName.substring(fileName.lastIndexOf(".")+1);}File file = null;do {// 生成文件名:fileName = UUID.randomUUID().toString() + "." + fileFormat;file = new File(savePath + fileName);} while (file.exists());File saveFile = new File(savePath + fileName);try {item.write(saveFile);} catch (Exception e) {e.printStackTrace();}System.out.println("***************************************************************");System.out.println("bornName: " + bornName);System.out.println("fileName: " + fileName);System.out.println("fileFormat: " + fileFormat);System.out.println("fileType: " + fileType);System.out.println("fileSize: " + fileSize.longValue());System.out.println("hostAdd: " + hostAddr);System.out.println("virtualAddr: " + virtualAddr);System.out.println("urlPath: " + urlPath);System.out.println("imageURL: " + hostAddr + virtualAddr + fileName);System.out.println("***************************************************************");CmResource cmResource = new CmResource();cmResource.setBornName(bornName);cmResource.setFileName(fileName);cmResource.setFileFormat(fileFormat);cmResource.setFileType(fileType);cmResource.setFileSize(fileSize);cmResource.setHostAddr(hostAddr);cmResource.setVirtualAddr(virtualAddr);cmResource.setUrlPath(urlPath);cmResourceList.add(cmResource);}}// 将文件的 相对路径+源名称+文件大小 返回给response流。request.setAttribute("cmResourceList", cmResourceList);response.setContentType("text/html; charset=utf-8");response.getWriter().print("文件上传成功!");}}万能通用
㈤ 用jquery uploadify 上传文件得到选择的文件路径!
fileObj.name得到的只是文件的名称你将IE的安全性调到最低,他得到的就是路径,现在IE9对这个路径进行了加密,所以得到的都是名字,就算的到路径也是一个虚拟的路径,最好将文件上传,取文件上传后的路径进行操作。
㈥ jquery uploadify上传如何设置文件大小不超过2M
版本 uploadfy3fileSizeLimit : 2048, 具体:jsp页面:jQuery("#uploadify").uploadify({ 。。。。buttonText : 'SELECT', // The text to use for the browse buttoncheckExisting : false, // The path to a server-side script that checks for existing files on the serverdebug : false, // Turn on swfUpload debugging modefileObjName : 'Filedata', // The name of the file object to use in your server-side scriptfileSizeLimit : 2048, // The maximum size of an uploadable file in KB (Accepts units B KB MB GB if string, 0 for no limit)fileTypeDesc : fileTypeDesc, 版本:jquery.uploadify.v2.1.0.min 'sizeLimit' : 2048*1024, jQuery("#uploadify").uploadify({ 。。。。。 'auto' : false, 'multi' : true, 'queueSizeLimit' : queueSizeLimit, 'buttonText' : 'BROWSE', 'sizeLimit' : 2048*1024,
㈦ 有哪些好用的 jQuery 图片上传插件
1、uploadify它是针对jQuery的免费文件上传插件,可以轻松将单个或多个文件上传到网站上,可控制并发上传的文件数,通过接口参数和CSS控制外观。Web服务器需支持flash和后端开发语言。2、FancyUpload它是一个由CSS和XHTML编写样式的Ajax文件上传工具,安装简便,服务器独立,由MooTools模块驱动,可以在任何现代浏览器上使用。3、Aurigma Upload Suite(Image Uploader)这是一个不限大小,不限格式的文件/图片批量上传工具,是收费控件。它支持云端存储和客户端文件处理,支持断点续传,稳定可靠。从8.0.8开始,Image Uploader将名称改为"Aurigma Upload Suite"。