当前位置:首页 » 文件管理 » jsp上传图片插件

jsp上传图片插件

发布时间: 2022-09-20 10:12:54

A. jsp中使用jquery的ajaxfileupload插件怎么实现异步上传

ajaxfileupload实现异步上传的完整例子:
JSP页面中引入的script代码:
<script>
function ajaxFileUpload()
{
$("#loading").ajaxStart(function(){
$(this).show();
})//开始上传文件时显示一个图片
.ajaxComplete(function(){
$(this).hide();
});//文件上传完成将图片隐藏起来

$.ajaxFileUpload({
url:'AjaxImageUploadAction.action',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileElementId:'imgfile',//文件上传空间的id属性 <input type="file" id="imgfile" name="file" />
dataType: 'json',//返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量

if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.message);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)

return false;
}
</script>
struts.xml配置文件中的配置方法:
<struts>
<package name="struts2" extends="json-default">
<action name="AjaxImageUploadAction" class="com.test.action.ImageUploadAction">
<result type="json" name="success">
<param name="contentType">text/html</param>
</result>
<result type="json" name="error">
<param name="contentType">text/html</param>
</result>
</action>
</package>
</struts>
上传处理的Action ImageUploadAction.action
package com.test.action;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.util.Arrays;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings("serial")
public class ImageUploadAction extends ActionSupport {

private File imgfile;
private String imgfileFileName;
private String imgfileFileContentType;
private String message = "你已成功上传文件";
public File getImgfile() {
return imgfile;
}
public void setImgfile(File imgfile) {
this.imgfile = imgfile;
}
public String getImgfileFileName() {
return imgfileFileName;
}
public void setImgfileFileName(String imgfileFileName) {
this.imgfileFileName = imgfileFileName;
}
public String getImgfileFileContentType() {
return imgfileFileContentType;
}
public void setImgfileFileContentType(String imgfileFileContentType) {
this.imgfileFileContentType = imgfileFileContentType;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}

@SuppressWarnings("deprecation")
public String execute() throws Exception {

String path = ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload");
String[] imgTypes = new String[] { "gif", "jpg", "jpeg", "png","bmp" };
try {
File f = this.getImgfile();

String fileExt = this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".") + 1).toLowerCase();
/*
if(this.getImgfileFileName().endsWith(".exe")){
message="上传的文件格式不允许!!!";
return ERROR;
}*/
/**
* 检测上传文件的扩展名是否合法
* */
if (!Arrays.<String> asList(imgTypes).contains(fileExt)) {
message="只能上传 gif,jpg,jpeg,png,bmp等格式的文件!";
return ERROR;
}

FileInputStream inputStream = new FileInputStream(f);
FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getImgfileFileName());
byte[] buf = new byte[1024];
int length = 0;
while ((length = inputStream.read(buf)) != -1) {
outputStream.write(buf, 0, length);
}
inputStream.close();
outputStream.flush();
} catch (Exception e) {
e.printStackTrace();
message = "文件上传失败了!!!!";
}
return SUCCESS;
}
}

B. jsp上传图片,选择图片后先不保存只显示在之前的页面,然后下面填写了其他的信息后在一起保存到数据库

<html>
<head>

<script type="text/javascript">
function show()
{
var img = document.getElementById("file").value;
document.getElementById("photo").src =img;
}
</script>
</head>
<body>
<input type="file" onchange="show()" id="file"></input>
<img id="photo" src="" style="width:400px;height:300px;" ></img>
</body>
</html>
试试这段代码,不过在有的浏览器里面无效。

C. 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的包。

D. jsp上传及显示照片

<form action="pages/news/NewsServlet?status=insert" method="post" enctype="multipart/form-data">
新闻图片:
<input type="file" name="img">
<br />
<input type="submit" value="添加">
</form>
后台代码
public void insert(HttpServletRequest request, HttpServletResponse response)
throws Exception {
SmartUpload smart = new SmartUpload();
smart.initialize(super.getServletConfig(), request, response);
smart.upload();

File img = smart.getFiles().getFile(0);
String fileName = null;
if (img != null && img.getSize() > 0) {
fileName = UUID.randomUUID().toString() + "." + img.getFileExt();

img.saveAs("/upload/" + fileName);
}

String title = smart.getRequest().getParameter("title");
String content = smart.getRequest().getParameter("content");

News news = new News();
news.setTitle(title);
news.setContent(content);
news.setImg(fileName);
news.setPostDate(new Date());

boolean flag = ServiceFactory.getINewsServiceInstance().insert(news);

if (flag) {
request.setAttribute("message", "新闻添加成功");
} else {
request.setAttribute("message", "新闻添加失败");
}
request.setAttribute("url", "pages/news/NewsServlet?status=list");

request.getRequestDispatcher("/pages/forward.jsp").forward(request,
response);
}
}

E. ueditor1.4.3 jsp版本在上传图片时出现“后端配置项没有正常加载,上传插件不能正常使用!”

关于这个错误,富文本框无法上传文件的解决方案:
1、确认config.json里面的 imagePathFormat 这个路径正确;
2、确认在web-inf下面的lib中已导入Ueditor的jar包和文件上传相关的jar包。

F. jsp中使用jquery的ajaxfileupload插件怎么实现异步上传

JSP页面中引入的script代码
<script>
function
ajaxFileUpload()
{
$("#loading").ajaxStart(function(){
$(this).show();
})//开始上传文件时显示一个图片
.ajaxComplete(function(){
$(this).hide();
});//文件上传完成将图片隐藏起来
$.ajaxFileUpload({
url:'AjaxImageUploadAction.action',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileElementId:'imgfile',//文件上传空间的id属性
<input
type="file"
id="imgfile"
name="file"
/>
dataType:
'json',//返回值类型
一般设置为json
success:
function
(data,
status)
//服务器成功响应处理函数
{
alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量
if(typeof(data.error)
!=
'undefined')
{
if(data.error
!=
'')
{
alert(data.error);
}else
{
alert(data.message);
}
}
},
error:
function
(data,
status,
e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return
false;
}
</script>
struts.xml配置文件中的配置方法:
<struts>
<package
name="struts2"
extends="json-default">
<action
name="AjaxImageUploadAction"
class="com.test.action.ImageUploadAction">
<result
type="json"
name="success">
<param
name="contentType">text/html</param>
</result>
<result
type="json"
name="error">
<param
name="contentType">text/html</param>
</result>
</action>
</package>
</struts>
上传处理的Action
ImageUploadAction.action
package
com.test.action;
import
java.io.File;
import
java.io.FileInputStream;
import
java.io.FileOutputStream;
import
java.util.Arrays;
import
org.apache.struts2.ServletActionContext;
import
com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings("serial")
public
class
ImageUploadAction
extends
ActionSupport
{
private
File
imgfile;
private
String
imgfileFileName;
private
String
imgfileFileContentType;
private
String
message
=
"你已成功上传文件";
public
File
getImgfile()
{
return
imgfile;
}
public
void
setImgfile(File
imgfile)
{
this.imgfile
=
imgfile;
}
public
String
getImgfileFileName()
{
return
imgfileFileName;
}
public
void
setImgfileFileName(String
imgfileFileName)
{
this.imgfileFileName
=
imgfileFileName;
}
public
String
getImgfileFileContentType()
{
return
imgfileFileContentType;
}
public
void
setImgfileFileContentType(String
imgfileFileContentType)
{
this.imgfileFileContentType
=
imgfileFileContentType;
}
public
String
getMessage()
{
return
message;
}
public
void
setMessage(String
message)
{
this.message
=
message;
}
@SuppressWarnings("deprecation")
public
String
execute()
throws
Exception
{
String
path
=
ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload");
String[]
imgTypes
=
new
String[]
{
"gif",
"jpg",
"jpeg",
"png","bmp"
};
try
{
File
f
=
this.getImgfile();
String
fileExt
=
this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".")
+
1).toLowerCase();
/*
if(this.getImgfileFileName().endsWith(".exe")){
message="上传的文件格式不允许!!!";
return
ERROR;
}*/
/**
*
检测上传文件的扩展名是否合法
*
*/
if
(!Arrays.<String>
asList(imgTypes).contains(fileExt))
{
message="只能上传
gif,jpg,jpeg,png,bmp等格式的文件!";
return
ERROR;
}
FileInputStream
inputStream
=
new
FileInputStream(f);
FileOutputStream
outputStream
=
new
FileOutputStream(path
+
"/"+
this.getImgfileFileName());
byte[]
buf
=
new
byte[1024];
int
length
=
0;
while
((length
=
inputStream.read(buf))
!=
-1)
{
outputStream.write(buf,
0,
length);
}
inputStream.close();
outputStream.flush();
}
catch
(Exception
e)
{
e.printStackTrace();
message
=
"文件上传失败了!!!!";
}
return
SUCCESS;
}
}
转载,仅供参考。

G. jquery 上传文件插件uploadify jsp版本

写一个servlet,看这里
http://www.javaeye.com/topic/376101

H. struts2如何上传图片并在同一jsp中显示出来

//action的关键代码
import com.xt.gyz.facelook.service.FacesService;
public class ShowPic extends ActionSupport {

private InputStream is;
private Integer id;
private FacesService facesService;

public Integer getId() {
return id;
}

public void setId(Integer id) {
this.id = id;
}

public void setFacesService(FacesService facesService) {
this.facesService = facesService;
}

public InputStream getIs() {
return is;
}

public void setIs(InputStream is) {
this.is = is;
}

@Override
public String execute() throws Exception {
Faces face=facesService.findById(id);
is=new ByteArrayInputStream(face.getPic());
// FileOutputStream fos=new FileOutputStream(new File("E:/body.jpg"));
// System.out.println(fos);
// System.out.println("face:"+face.getPic().length);
// fos.write(face.getPic());
// fos.flush();
// fos.close();
return super.execute();
}
}
//不要忘记struts.xml配置
......
<action name="showPic" class="showPicAction">
<result type="stream">
<param name="inputName">is</param>
<param name="contectType">image/jpg</param>
</result>
</action>
.....

这样就可以啦

I. extjs 3.4中 怎么给htmlEdit添加图片插件 实现图片上传功能

首先要使用extjs自带的HTMLEditor,然后在原有的工具条上添加一个图片按钮,点击这个图片按钮要弹出窗口,这个窗口负责实现上传功能,实现上传后,要将上传的图片路径添加到HTMLEditor的光标处,并且要以<IMG></IMG>的方式,这样HTMLEditor才能解析出来。实现代码如下:

前台JSP页面



fieldLabel : '商品特性',
id : 'shopSp.spTxms',

name : 'shopSp.spTxms',
xtype : 'StarHtmleditor',
anchor : '93%'


这其中引用了StarHtmleditor,StarHtmleditor.js的代码如下,直接将代码复制下来,然后新建个JS,全复制进去就行了。


var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
var editor = this;
var imgform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [{
xtype : 'textfield',
fieldLabel : '选择文件',
id : 'UserFile',
name : 'UserFile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能为空',
anchor : '90%'
}],
buttons : [{
text : '上传',
handler : function() {
if (!imgform.form.isValid()) {return;}
imgform.form.submit({
waitMsg : '正在上传......',
url : 'HTMLEditorAddImgCommonAction.action',
success : function(form, action) {
var element = document.createElement("img");
element.src = action.result.fileURL;
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
//win.hide();//原始方法,但只能传一个图片
//更新后的方法
form.reset();
win.close();
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告','上传失败',action.result.errors.msg);
}
});
}
}, {
text : '关闭',
handler : function() {
win.close(this);
}
}]
})

var win = new Ext.Window({
title : "上传图片",
width : 300,
height : 200,
modal : true,
border : false,
iconCls : "picture.png",
layout : "fit",
items : imgform

});
win.show();
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls : "x-btn-icon",
icon : "picture.png",
handler : this.addImage,
scope : this
});
}
});
Ext.reg('StarHtmleditor', HTMLEditor);

JS的第一句var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, 网上是没有var的,不用var不知道为什么总是报错,另外JS一定要与JSP的编码方式一致,要不然报莫名其妙的错误,而且错误都没有显示。

后台java代码



/****
* HTMLEditor增加上传图片功能:
* 1、上传图片后,需要将图片的位置及图片的名称返回给前台HTMLEditor
* 2、前台HTMLEditor根据返回的值将图片显示出来
* 3、进行统一保存
* @param 上传图片功能
* @return JSON结果
* @throws IOException
*/
public void HTMLEditorAddImg() throws IOException {
if(!"".equals(UserFile) && UserFile != null && UserFile.length() > 0){
File path = ImportImg(UserFile, "jpg");
UserFilePath = "../" + path.toString().replaceAll("\\", "/").substring(path.toString().replaceAll("\\", "/").indexOf("FileImg"));
}
this.getResponse().setContentType("text/html");
this.getResponse().getWriter().write("{success:'true',fileURL:'" + UserFilePath + "'}");
}


特别要注意的是路径问题,路径问题主要有2点需要注意:

1、前台页面引用StarHtmleditor.js的路径一定要正确;

2、Htmleditor上传的图片路径一定要改,因为上传之后图片路径变为http://localhost:8080/,在正常使用中图片不显示,要将该地址替换为服务器的IP地址;替换方法如下:


//获取本地IP地址,因为extjs的htmleditor上传的照片路径有问题,需要将路径替换为本机IP地址
InetAddress inet = InetAddress.getLocalHost();
shopSp.setSpTxms(shopSp.getSpTxms().replace("localhost", inet.getHostAddress().toString()));

这样基本就完成了这个HTMLEditor上传图片功能。

如图:

J. fancyzoom 在jsp中怎么使用

fancyzoom是一个js写的图片缩放插件,使用方法如下:
FancyZoom的用法是在网页加载的时候,就执行它的特效加载函数:setupZoom();这样只能针对图片已经在网页中的这种情况,如果类似上传,图片是用户后来传上去的,那么就需要在图片上传完之后再执行一次特效渲染函数:setupZoom();
使用方法如下:
1、引入js文件:FancyZoomHTML.js
2、在需要缩放的图片上写如下代码:
var inSpinbox = document.getElementById('ZoomSpin');

if (inSpinbox) {return;}
inSpinbox = document.createElement("div");

热点内容
添加多个FTP网站的方法有哪些 发布:2024-10-10 12:03:03 浏览:841
表格怎么调用网页数据库数据库数据 发布:2024-10-10 11:37:33 浏览:656
海力压缩机 发布:2024-10-10 11:32:26 浏览:526
洗过的海带存储方法 发布:2024-10-10 11:19:00 浏览:240
64H的源码 发布:2024-10-10 11:06:01 浏览:153
mc服务器怎么增加back指令 发布:2024-10-10 10:58:48 浏览:257
termux如何搭建服务器 发布:2024-10-10 10:18:05 浏览:737
中国石化的电话服务密码是多少 发布:2024-10-10 10:16:46 浏览:44
婚纱店宣传片视频脚本 发布:2024-10-10 10:08:55 浏览:869
android写入文件 发布:2024-10-10 10:08:11 浏览:437