<!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()
}
})
}
});
分享到:
相关推荐
实现通过前端页面js将图片上传并回显到界面上
本地图片默认在文本框中展示暂无图片 上点击上传的时候展示上传后的图片回显 多个图片上传以及单个图片上传回显
支持多图片回显 与多个文件上传 支持图片删除与回显 原生jquery file上传
SpringMVC进行表单上的文件上传以及多个文件同时上传,和简单表的增删查改。
点击网页上的元素调用Android相机拍照或选择图片,并将图片显示在元素上
实用Mysql数据库的一个项目,含文本上传,图片上传回显,导出excel功能,bootstrap前端框架,ssm对应的lib的各种jar文件等,只需自行在数据库里建表,需要tomcat启动
java实现与打印机通信具体包括内容有: 1.实现打印输入文本预览打印显示 2.实现选择文件显示 3.配置打印服务器
java实现web服务器:(1) 连接:Web浏览器与Web服务器建立连接,打开一个称为socket(套接字)的虚拟文件,此文件的建立标志着连接建立成功。 (2) 请求:Web浏览器通过socket向Web服务器提交请求。HTTP的请求一般是...
新建java项目 webServer 新建java文件 WebServer.java Processor.java 一、HTTP协议的作用原理 WWW是以Internet作为传输媒介的一个应用系统,WWW网上最基本的传输单位是Web网页。WWW的工作基于客户...
基于SSM(Spring+SpringMvc+Mybatis)框架的图片上传并保存到数据库中与回显的案例
第4章 Java的类别方法 4-1 模组化程式设计 4-2 程序是一个黑盒子 4-3 Java的类别方法 4-4 Java的类别变数和变数范围 4-5 类别方法的过载 4-6 递回程式设计 4-7 Math数学类别的类别方法 4-1 模组化程式设计-模组 模组...
STM32单片机自动量程测电阻,蓝牙传输。这个是我大三疫情在老家上网课,好用的万用表都在学校宿舍,家里的是老的指针的,测电阻很不方便,于是因为需求和感兴趣,就决定动手制作个自动量程的电阻表,将采集到的电压...
通过一个按钮,选择一张图片,通过jni 将图片信息传到底层,然后将处理后的数据传回安卓层,手写通用版的Android.mk ,让你迅速搭建一个工程测试你的底层代码,一个积分,绝对值得。
ueditor1.4.3 富文本插件完美使用,搭建后可以直接上传图片以及多图片上传回显。主要的配置在config.json。可以查看官网ip,一般人出问题都是在config.json,或者不知道案例文件该怎么放,放哪里。
手机自动化测试的原理:PC上的控制端(测试工具)通过串口、USB或者无线方式与手机终端的agent(解析器)相连,然后通过测试工具向手机发送请求,手机收到请求后,交给agent进行解析,然后agent将这些解析的命令发给...
pytest-testlink 更新测试链接中的测试结果。...to pick from environment variable.build_name =Prefix $ to pick from environment variable.##pytest.ini 配置 testlink_ini_file=testlink.ini ###Testl
该方法在CPU 上的运行速度是基于VGG 的SSD 方法的5 倍左右,是Faster-RCNN 的58 倍左右,在模型大小上是基于VGG 的SSD 方 法的2/9 左右,是Faster-RCNN 的2/49 左右,精确度为89%;与直接将数据传回云端服务器再...
基于SSM框架的图片(文件)上传并显示到页面,附有数据库
加载完毕后回调函数----回调参数说明:url-传回图片地址值,picDiv-传回所加载图片DIV的ID,w-传回的图片原始宽度,h-传回的图片原始高度; 加载图片事件参数说明: url-图片路径,picDiv-装载图片的DIV的ID,用法:...
js html 把弹出窗口中的某些值传回原来网页上