java 上传图片 浏览完后可见 针对所有浏览器

简介:

需求,图片上传,需要浏览完后就在指定位置显示图片,支持所有浏览器。
  分析,不能只用JS完成,不可能支持所有浏览器,所以只能用后台技术。
  JSP:

<dl class="l UbLeft">
<dt><a href=""><img src="${basePrefix}/images/meh.jpg" id="photo1-img" width="108" height="105" /></a><input type="hidden" id="photo1-val" name="url1" value=""/></dt>
<dd><input type="file" id="photo1" class="Dina l" name="userPic" onchange="uploadUserPicMore(this)"/><a href="javascript:void(0)" onclick="delUpload(1)"><f:message key="member_jsp.jsp.photo.uploadPhoto.jsp.delete" /></a></dd>
</dl>
js:
[html] view plaincopy
function uploadUserPicMore(file){
var id = $(file).attr('id');
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxComplete(function(){
$(this).hide();
});
$.ajaxFileUpload(
{
url:'/uploadUserPic.html',
secureuri:false,
fileElementId:id,
dataType: 'json',
data:{},
success: function (data)
{
$("#"+id+"-img").attr("src",data.url);
$("#"+id+"-val").val(data.url);
},
error: function (data, status, e)
{
alert(e);
}
}
);
return false;
}

最新内容请见作者的GitHub页:http://qaseven.github.io/

相关文章
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
741 0
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
400 23
|
前端开发 JavaScript Java
Java与JavaScript的区别与联系:有人的地方就有江湖,有浏览器的地方就有JavaScript
Java与JavaScript的区别与联系:有人的地方就有江湖,有浏览器的地方就有JavaScript
1192 0
|
Web App开发 Java
使用java操作浏览器的工具selenium-java和webdriver下载地址
【10月更文挑战第12天】Selenium-java依赖包用于自动化Web测试,版本为3.141.59。ChromeDriver和EdgeDriver分别用于控制Chrome和Edge浏览器,需确保版本与浏览器匹配。示例代码展示了如何使用Selenium-java模拟登录CSDN,包括设置驱动路径、添加Cookies和获取页面源码。
1133 6
|
安全 Oracle Java
edge浏览器加载java插件
edge浏览器加载java插件
1570 1
|
JSON 前端开发 JavaScript
java中post请求调用下载文件接口浏览器未弹窗而是返回一堆json,为啥
客户端调接口需要返回另存为弹窗,下载文件,但是遇到的问题是接口调用成功且不报错,浏览器F12查看居然返回一堆json,而没有另存为弹窗; > 正确的效果应该是:接口调用成功且浏览器F12不返回任何json,而是弹窗另存为窗口,直接保存文件即可。
605 2
|
存储 缓存 JavaScript
|
Web App开发 XML Java
《手把手教你》系列基础篇(九十六)-java+ selenium自动化测试-框架之设计篇-跨浏览器(详解教程)
【7月更文挑战第14天】这篇教程介绍了如何使用Java和Selenium构建一个支持跨浏览器测试的自动化测试框架。设计的核心是通过读取配置文件来切换不同浏览器执行测试用例。配置文件中定义了浏览器类型(如Firefox、Chrome)和测试服务器的URL。代码包括一个`BrowserEngine`类,它初始化配置数据,根据配置启动指定的浏览器,并提供关闭浏览器的方法。测试脚本`TestLaunchBrowser`使用`BrowserEngine`来启动浏览器并执行测试。整个框架允许在不同浏览器上运行相同的测试,以确保兼容性和一致性。
546 3
|
Web App开发 XML 安全
《手把手教你》系列基础篇(七十三)-java+ selenium自动化测试-框架设计基础-TestNG实现启动不同浏览器(详解教程)
【6月更文挑战第14天】本文介绍了如何使用TestNg进行自动化测试,特别是通过变量参数启动不同浏览器的步骤。
240 5
|
Web App开发 Java 测试技术
《手把手教你》系列技巧篇(二十六)-java+ selenium自动化测试-浏览器操作(详细教程)
【4月更文挑战第18天】本文介绍了Web自动化中的浏览器操作,包括如何打开不同类型的浏览器(如IE、Chrome、Firefox),以及进行页面操作如打开URL、浏览器最大化、刷新、前进和后退。还展示了如何设置浏览器位置和大小,以及获取当前URL和标题。此外,提供了项目实战例子,演示了如何用Selenium实现打开浏览器、设置位置和大小、搜索并执行页面操作的过程。文章最后提到一些其他可用的方法,并鼓励读者继续学习自动化测试相关知识。
451 3