jquery 预览并自增上传图片

最新推荐文章于 2021-08-11 10:16:01 发布

蜗牛慢慢向上爬

最新推荐文章于 2021-08-11 10:16:01 发布

阅读量676

点赞数

本文链接：https://blog.csdn.net/A9925/article/details/47316299

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

核心代码

  <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.οnlοad=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.οnlοad=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>

蜗牛慢慢向上爬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery 预览并自增上传图片

核心代码 window.onload=function(){//alert("加载完毕");document.getElementById("pic2").style.visibility="hidden";document.getElementById("pic3").style.visibility="hidden";//document.getEleme
复制链接

扫一扫