<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片上传预览演示</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="shangchuan.js" type="text/javascript"></script>
<script>
$(function () {
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});
</script>
</head>
<body>
<div style="width:500px;margin:0px auto;"><h2>图片上传预览演示</h2>
<div><img id="ImgPr" width="120" height="120" src="C:\Users\shibin\Desktop\tupian\jjjj.jpg" /></div>
<input type="file" id="up" />
</div>
</body>
</html>
jQuery.fn.extend({
uploadPreview: function (opts) {
var _self = this, _this = $(this);
opts = jQuery.extend({
Img: "ImgPr", Width: 100, Height: 100, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }
}
, opts || {});
_self.getObjectURL = function (file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
}
else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
}
else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
_this.change(function () {
if (this.value) {
if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
this.value = "";
return false
}
if ($.browser.msie) {
try {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
}
catch (e) {
var src = "";
var obj = $("#" + opts.Img);
var div = obj.parent("div")[0];
_self.select();
if (top != self) {
window.parent.document.body.focus()
}
else {
_self.blur()
}
src = document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)', 'width': opts.Width + 'px', 'height': opts.Height + 'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
}
}
else {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});
分享到:
相关推荐
在IT行业中,前端开发经常需要处理...总结来说,实现“java js图片上传回显”涉及前端JavaScript的文件读取与预览,以及后端Java的文件接收与存储。通过合理的前后端协作,我们可以构建一个稳定且高效的图片上传系统。
在IT行业中,本地图片上传回显是一个常见的功能需求,尤其在...综上所述,本地图片上传回显涉及前端与后端的交互,包括文件选择、预览、上传、安全验证和图片处理等多个环节,是构建富交互性Web应用的重要组成部分。
在Java开发中,图片上传、预览、剪切和缩放是常见的功能需求,尤其在Web应用中。这里,我们主要探讨如何实现这些功能,并基于`swfupload`这个库来构建一个完整的解决方案。 首先,`swfupload`是一个古老的Flash上传...
【SSM框架多上传文件图片回显示例】 在Java Web开发中,SSM(Spring、SpringMVC、MyBatis)框架是常见的选择,尤其在处理复杂的业务逻辑时。本示例将着重介绍如何在SpringMVC中实现多文件图片上传,并在前端展示...
在线图片预览功能是网页应用中的常见需求,它允许用户在不下载图片的情况下查看图片内容。这个功能在很多场景下都很实用,比如社交媒体、电子商务网站、文档分享平台等。实现在线图片预览功能通常涉及前后端的交互,...
这个过程中,可以使用JNI实现YUV到ARGB的转换函数,然后将处理后的图像数据传回Java层。 5. **Java层显示**: 在Java层,可以使用SurfaceView或者TextureView来显示视频帧。通过SurfaceHolder的`setCallback`方法...
SSM框架,全称Spring+SpringMvc+Mybatis,是Java Web开发中常见的技术栈,用于构建高效、灵活的企业级应用程序。在这个项目中,我们主要关注的是如何在SSM框架下实现图片上传并将其信息存储到数据库,以及如何将已...
本篇文章将深入探讨如何在Android应用中通过拍照或选取相册中的图片,并将图片URL返回给JavaScript,以便在H5页面上展示。首先,我们需要理解Android的Intent系统,然后了解如何使用WebView组件来实现JS与Android的...
在32位操作系统上,火狐浏览器并不直接支持ActiveX控件,因为这是Internet Explorer特有的一项技术。 为了在火狐中调用OCX控件,我们需要使用第三方插件,例如“NPAPI”(Netscape Plugin Application Programming ...
Java编程语言提供了丰富的API来实现与打印机的通信,主要通过Java的AWT(Abstract Window Toolkit)和Swing库。在本项目"java实现打印机通信源码(awt)"中,我们将探讨如何使用AWT库来创建打印机接口并完成打印任务。...
在现代的Web开发中,文件上传是一个常见的功能,它允许用户将文件如图片上传到服务器上。在本文中,我们将探讨如何使用Layui前端UI框架来实现上传图片并返回图片地址的方法。 Layui是一个非常流行的前端UI框架,它...
在Java开发中,将文件传输到前端并允许用户下载是一个常见的需求。这个场景通常涉及到服务器端的文件处理、HTTP响应的构建以及前端的交互。在这个过程中,IO流扮演着关键角色,它允许程序高效地读取和写入数据。下面...
本篇文章将深入探讨如何使用JNI(Java Native Interface)技术,结合C++和Java,实现在Android平台上进行高效的图片高斯模糊处理,并且利用多线程优化性能。 首先,了解JNI是Java平台提供的一种技术,允许Java代码...
在Java Web开发中,分页是常见的功能,用于展示大量数据时提高用户体验。自定义分页标签是指开发者根据项目需求创建的个性化分页组件,它能够灵活地与后端数据库交互,实现数据的分页展示。本文将深入探讨如何在Java...
新建java项目 webServer 新建java文件 WebServer.java Processor.java 一、HTTP协议的作用原理 WWW是以Internet作为传输媒介的一个应用系统,WWW网上最基本的传输单位是Web网页。WWW的工作基于客户...
在IT领域,SSM框架是Java Web开发中常用的三大组件Spring、Spring MVC和MyBatis的集成,用于构建高效、灵活的Web应用。本项目主要涉及"基于SSM框架的图片上传并回显",这是一个典型的文件上传功能,通常用于用户上传...
在Java Web开发中,分页是一项非常常见的需求,它能够帮助用户更有效地浏览大量数据,提高用户体验。本DEMO主要展示了如何实现一个通用的分页功能,覆盖了后台和前台的处理逻辑。以下是对这个主题的详细阐述: 一、...
STM32单片机自动量程测电阻,蓝牙传输。这个是我大三疫情在老家上网课,好用的万用表都在学校宿舍,家里的是老的指针的,测电阻很不方便,于是因为需求和感兴趣,就决定动手制作个自动量程的电阻表,将采集到的电压...
3. 在 Java 中,一个类可同时定义许多同名的方法,这些方法的形式参数个数、类型或顺序各不相同,传回的值也可以不相同。这种面向对象程序的特性称为_____ 知识点:Java 方法重载。Java 中的方法重载是一种面向对象...
### Java内存模型的历史变迁 #### 一、引言 随着多核处理器的普及与高性能计算需求的增长,Java作为主流编程语言之一,对于并发处理的支持变得越来越重要。Java内存模型(Java Memory Model,简称JMM)作为Java...