jquery 预览并自增 上传图片
2015-08-06 14:30
573 查看
核心代码
<script src="{:CUSTOM_TEMPLATE_PATH}Index/index/js/jquery-1.8.3.min.js"></script>
<!-- 包含了所有编译插件 -->
<script src="{:CUSTOM_TEMPLATE_PATH}Index/index/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.onload=function(){
//alert("加载完毕");
document.getElementById("pic2").style.visibility="hidden";
document.getElementById("pic3").style.visibility="hidden";
//document.getElementById("EleId").style.visibility="visible";
}
</script>
<script type="text/javascript">
$(function(){
$("#pic").change(function(){
document.getElementById("pic2").style.visibility='visible';
if($.browser.msie){
$("#img0").attr("src",$(this).val())
$("#info").text("当前选择的文件:"+$(this).val())
}else{
$("#info").text("当前选择的文件:"+$(this).val())
var objUrl=getObjectURL(this.files[0]);
console.log("objUrl="+objUrl);
if(objUrl){
$("#img0").attr("src",objUrl);
}
}
})
//建立一個可存取到該file的url
function getObjectURL(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 ;
}
})
$(function(){
$("#pic2").change(function(){
document.getElementById("pic3").style.visibility='visible';
if($.browser.msie){
$("#img2").attr("src",$(this).val())
$("#info2").text("当前选择的文件:"+$(this).val())
}else{
$("#info2").text("当前选择的文件:"+$(this).val())
var objUrl=getObjectURL(this.files[0]);
console.log("objUrl="+objUrl);
if(objUrl){
$("#img2").attr("src",objUrl);
}
}
})
//建立一個可存取到該file的url
function getObjectURL(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 ;
}
})
$(function(){
$("#pic3").change(function(){
if($.browser.msie){
$("#img3").attr("src",$(this).val())
$("#info3").text("当前选择的文件:"+$(this).val())
}else{
$("#info3").text("当前选择的文件:"+$(this).val())
var objUrl=getObjectURL(this.files[0]);
console.log("objUrl="+objUrl);
if(objUrl){
$("#img3").attr("src",objUrl);
}
}
})
//建立一個可存取到該file的url
function getObjectURL(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 ;
}
})
</script>
</head>body
<div class="addto_ingput" style="padding-bottom:10px">
<div class="addto_ingput_left pull-left">
<label class="text-right">晒单 ：</label>
</div>
<div class="addto_ingput_right pull-left">
<div class="carousel-inner pull-left" style="width:20.25%; margin-right:4%; margin-top:4%">
<div class="item active">
<input type="file" name="thesun_img[]" id="pic" class="file0" />
<span id="info"></span>
<img src="" alt="" id="img0" width="100" />
</div>
</div>
<div class="carousel-inner pull-left" style="width:20.25%; margin-right:4%; margin-top:4%">
<div class="item active">
<input type="file" name="thesun_img[]" id="pic2" class="file0"/>
<span id="info2" style="margin-left:10px;"></span>
<img src="" alt="" id="img2" width="150" />
</div>
</div>
<div class="carousel-inner pull-left" style="width:20.25%; margin-right:4%; margin-top:4%">
<div class="item active">
<input type="file" name="thesun_img[]" id="pic3" class="file0"/>
<span id="info3" style="margin-left:10px;"></span>
<img src="" alt="" id="img3" width="180" />
</div>
</div>
<script type="text/javascript">
$('#submit').click(function(){
//alert('111111');
$('#form').submit();
});
</script>
<div class="fbpl_btn">
<input type="hidden" name="shopid" value="{$shopinfo.id}" >
</div>
</div>
<div class="clearfix"></div>
<button id="submit" type="submit" class="btn btn-primary btn-lg btn-block " style="background-color:#ea4c88; border-radius:15px; border:0; margin-top:15px">
发表评价
</button>=============================================================================
图片替换上传 按钮（美观一些） 用图片盖住input上传文件控件。
例：
<style type="text/css">
.fileInputContainer{
height:256px;
background:url(http://images.cnblogs.com/cnblogs_com/dreamback/437546/o_ff6.png);
position:relative;
width: 256px;
}
.fileInput{
height:256px;
font-size: 300px;
position:absolute;
right:0;
top:0;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
}
</style>
<div class="fileInputContainer">
<input class="fileInput" type="file" name="" id="" />
</div>例：完整
<script src="{:CUSTOM_TEMPLATE_PATH}Index/index/js/jquery-1.8.3.min.js"></script>
<!-- 包含了所有编译插件 -->
<script src="{:CUSTOM_TEMPLATE_PATH}Index/index/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.onload=function(){
//alert("加载完毕");
document.getElementById("pic2").style.visibility="hidden";
document.getElementById("pic3").style.visibility="hidden";
document.getElementById("img2").style.visibility="hidden";
document.getElementById("img3").style.visibility="hidden";
//document.getElementById("EleId").style.visibility="visible";
}
</script>
<style type="text/css">
.fileInputContainer{
height:256px;
//background:url(http://images.cnblogs.com/cnblogs_com/dreamback/437546/o_ff6.png);
position:relative;
width: 200px;
}
.fileInput{
height:256px;
font-size: 300px;
position:absolute;
right:0;
top:0;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
}
</style>
<script type="text/javascript">
$(function(){
$("#pic").change(function(){
document.getElementById("pic2").style.visibility='visible';
document.getElementById("img2").style.visibility="visible";
if($.browser.msie){
$("#img0").attr("src",$(this).val())
// $("#info").text("当前选择的文件:"+$(this).val())
}else{
// $("#info").text("当前选择的文件:"+$(this).val())
var objUrl=getObjectURL(this.files[0]);
console.log("objUrl="+objUrl);
if(objUrl){
$("#img0").attr("src",objUrl);
}
}
})
//建立一個可存取到該file的url
function getObjectURL(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 ;
}
})
$(function(){
$("#pic2").change(function(){
document.getElementById("pic3").style.visibility='visible';
document.getElementById("img3").style.visibility="visible";
if($.browser.msie){
$("#img2").attr("src",$(this).val())
//$("#info2").text("当前选择的文件:"+$(this).val())
}else{
// $("#info2").text("当前选择的文件:"+$(this).val())
var objUrl=getObjectURL(this.files[0]);
console.log("objUrl="+objUrl);
if(objUrl){
$("#img2").attr("src",objUrl);
}
}
})
//建立一個可存取到該file的url
function getObjectURL(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 ;
}
})
$(function(){
$("#pic3").change(function(){
if($.browser.msie){
$("#img3").attr("src",$(this).val())
// $("#info3").text("当前选择的文件:"+$(this).val())
}else{
// $("#info3").text("当前选择的文件:"+$(this).val())
var objUrl=getObjectURL(this.files[0]);
console.log("objUrl="+objUrl);
if(objUrl){
$("#img3").attr("src",objUrl);
}
}
})
//建立一個可存取到該file的url
function getObjectURL(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 ;
}
})
</script>
</head>body
<div class="addto_ingput" style="padding-bottom:10px">
<div class="addto_ingput_left pull-left">
<label class="text-right">晒单 ：</label>
</div>
<div class="addto_ingput_right pull-left">
<div class="carousel-inner pull-left" style="width:20.25%; margin-right:4%; margin-top:4%">
<div class="item active fileInputContainer">
<input type="file" name="thesun_img[]" id="pic" class="file0 fileInput" />
<span id="info"></span>
<a><img src="{:CUSTOM_TEMPLATE_PATH}Index/index/img/tj_img.png" alt="" id="img0" width="160" /> </a>
</div>
</div>
<div class="carousel-inner pull-left" style="width:20.25%; margin-right:4%; margin-top:1%">
<div class="item active fileInputContainer">
<input type="file" name="thesun_img[]" id="pic2" class="file0 fileInput"/>
<span id="info2" style="margin-left:10px;"></span>
<img src="{:CUSTOM_TEMPLATE_PATH}Index/index/img/tj_img.png" alt="" id="img2" width="160" />
</div>
</div>
<div class="carousel-inner pull-left" style="width:20.25%; margin-right:4%; margin-top:1%">
<div class="item active fileInputContainer">
<input type="file" name="thesun_img[]" id="pic3" class="file0 fileInput"/>
<span id="info3" style="margin-left:10px;"></span>
<img src="{:CUSTOM_TEMPLATE_PATH}Index/index/img/tj_img.png" alt="" id="img3" width="160" />
</div>
</div>
<script type="text/javascript">
$('#submit').click(function(){
//alert('111111');
$('#form').submit();
});
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML事件冒泡和JQuery阻止事件冒泡的方式
- jquery 其他api操作
- JQuery星星评级
- jquery on绑定类似hover的功能
- jQuery设置和移除文本框默认值
- jQuery日常使用1
- jquery合并表格或者flexGridView
- jquery实现仿新浪微博评论滚动效果
- Jquery+Ajax+Json+存储过程实现高效分页
- Jquery 实现点击一个页面跳转后在另外一个页面显示指定位置
- jquery表单ajax提交以及checkbox全选/全不选 .
- 解决jquery操作checkbox全选全不选无法勾选问题
- jquery实现点击查看更多内容控制段落文字展开折叠效果
- jquery combobox下拉及异步加载数据
- 【RequireJS 学习笔记】RequireJS 学习笔记 2 —— RequireJS 版 页码切换demo 分类： javascript js jquery RequireJS js代码切换 2015-08-06 11:18 1人阅读 评论(
- jquery换肤
- jQuery实现类似老虎机滚动抽奖效果
- 使用jquery排重并排序
- jquery 9种选择器
- jquery入门：启动顺序，核心用法