<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片上传前预览</title>
<link href="imgup.css" rel="stylesheet" type="text/css">
<style type="text/css">
::-moz-focus-inner{
padding: 0;
border: 0;
}
.ui_button,
.ui_fileup {
vertical-align: middle;
border: 1px solid #ccc;
display: inline-block;
padding: 5px 10px;
background: #FFF;
font-size: 12px;
*overflow: visible;
*display: inline;
*zoom: 1;
}
.ui_fileup {
position: relative;
overflow: hidden;
}
.ui_fileup input {
filter: alpha(opacity=1);
position: absolute;
background: #fff;
font-size: 60px;
cursor: default;
width: auto;
opacity: 0;
z-index: 1;
left: auto;
right: 0;
top: 0;
}
.avataria .cont {
text-align: center;
min-height: 1%;
margin: 25px;
width: 302px;
_zoom: 1;
}
.avataria form {
text-align: left;
overflow: hidden;
}
.avataria .cont:after {
content: "";
display: block;
overflow: hidden;
height: 0;
clear: both;
}
.thumb {
float: right;
height: 120px;
width: 120px;
}
.cropaera {
clear: both;
}
.preview {
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div class="avataria" title="头像上传前预览">
<div class="cont">
<div class="thumb"></div>
<form enctype="application/x-www-form-urlencoded">
<div class="ui_fileup"><input type="file" id="file" accept="image/*" onerror="alert('请选择一个图片')">浏览</div>
<input type="submit" class="ui_button" value="保存">
<input name="crop" type="hidden">
</form>
</div>
<div class="cont">
<div id="preview" class="preview"></div>
</div>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script src="imagepreview.js"></script>
<script src="jquery.crop.js"></script>
<script>
imagepreview(document.getElementById("file"), document.getElementById("preview"), function(info){
//alert("文件名:" + info.name + "\r\n图片原始高度:" + info.height + "\r\n图片原始宽度:" + info.width);
//这里若return false则不预览图片
$("#preview").css({
background: "none"
});
$("#preview").crop( function(e){
$("input[type='hidden']").val([e.top, e.left, e.height, e.width].toString());
}, ".thumb");
});
</script>
</body>
</html>
jquery图片上传前预览 无需上传至服务器
- q7_417989了解作者
- 36.5KB文件大小
- rar文件格式
- 0收藏次数
- VIP专享资源类型
- 0下载次数
- 2022-04-09 00:26上传日期
图片上传前预览，无需上传至服务器 同时可以进行图片剪切
jquery图片上传前预览 无需上传至服务器.rar
上传前预览和剪切- jquery.crop.js4.4KB
- imgup.css3.5KB
- imgpreview.html2.2KB
- jquery-1.8.3.min.js91.4KB
- imagepreview.js2.7KB
内容介绍
评论
相关推荐
- jQuery各大云服务器门户幻灯片轮播jQuery各大云服务器门户幻灯片轮播
- 使用JQuery的服务器端参数化方法调用此演示演示了jquery如何调用服务器端参数化方法。
- jQuery服务器购买抽奖活动源代码jQuery服务器购买抽奖活动源代码是一款红色的九宫格抽奖源代码下载。
- jquery i18njquery-i18n-properties，实现web多语言，并实现了持久化,代码需要在服务器中访问。
- JQuery 及插件实现图片剪切分割上传服务器最近做一个项目的图像上传功能，这个功能就是类似与大型网站的图像上传功能。上传切割主要是相对于起点的四个偏移量，left、top、width、height值，然后在后台进行切割显示给会员。
- jQuery饼状图服务器资源图表统计代码jQuery饼状图服务器资源图表统计代码，一款展示服务器新的访问，跳出率，负载等资源使用情况图表统计数据代码。
- jQuery饼图服务器资源统计代码.zipjQuery饼图服务器资源统计代码是一款服务器新的访问，跳出率，负载，使用情况等canvas图表统计数据模板代码。
- jquery.easing请将脚本上传到您自己的服务器并更新指向gsgd.co.uk任何 url 以使用该版本的文件，或者您可以尝试将上述 url 用于 CDN（尽管目前只有 1.3 缓动脚本，请查看了解更多信息，也许可以尝试添加任何丢失的文件/仍在使用...
- jquery.Thailand.js：服务器端！jquery.Thailand.js งใช้ย！รอกที่อยู่ที่ดีที่สุดในไทยไม่ต้องใช้服务器端！ อ่านแนวคิดและที่มาที่ไป ต้องการปรับปรุงฐรข...
- jQuery饼图服务器资源统计特效代码jQuery饼图服务器资源统计代码是一款服务器新的访问，跳出率，负载，使用情况等canvas图表统计数据模板代码。
最新资源