jquery 预览并自增 上传图片

最新推荐文章于 2021-08-11 10:16:01 发布
最新推荐文章于 2021-08-11 10:16:01 发布
阅读量705 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A9925/article/details/47316299
版权


核心代码

  <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>


蜗牛慢慢向上爬
关注
专栏目录
jQuery实现本地预览上传图片功能
10-23
在本文中，我们将深入探讨如何使用jQuery来实现本地预览上传图片的功能，这对于网页上的图像交互体验至关重要。jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。在这个功能中...
php图片前预览,js简单上传图片预览功能-简单粗暴
weixin_32903229的博客
03-10 101
js简单上传图片预览功能html>js简单上传图片预览功能请选择图片文件：JPG/GIF$("#file0").change(function(){varobjUrl=getObjectURL(this.files[0]);console.log("objUrl="+objUrl);if(objUrl){$("#img0").attr("src",objUrl);$("...
jquery 实现 图片上传 预览
u014796999的博客
10-09 3042
jquery 实现 图片上传 预览   1.如下代码就能实现： 请选择图片文件：JPG/GIF $("#file0").change(function(){ var objUrl = getObjectURL(this.files[0]) ; console.log("objUrl = "+objUrl) ; if (objUrl
微信mvc上传图片到服务器,MVC微信浏览器图片上传（img转Base64）
weixin_28697603的博客
08-11 223
var subUrl = "";$("#file0").change(function() {//获取当前var objUrl = getObjectURL(this.files[0]);console.log(this.files[0])obUrl=objUrl;console.log("objUrl = " +objUrl);if(objUrl) {$("#img0").attr("src",...
基于JQuery实现图片上传预览与删除操作
10-22
在本文中，我们将深入探讨如何使用JQuery实现图片上传预览和删除功能。这个功能对于许多网站和应用程序来说是至关重要的，尤其是那些涉及到用户交互和内容上传的平台。以下是一步步实现这一功能的方法： 首先，我们...
jQuery多张图片上传预览代码
06-24
本项目涉及的主题是“jQuery多张图片上传预览代码”，这是一个实用的功能，允许用户在实际上传之前预览他们选择的多张图片，同时提供图片弹出放大查看的特效。这种功能可以提升用户体验，让用户在上传前对图片有直观...
简单实现jQuery上传图片显示预览功能
12-08
本文实例为大家分享了jQuery上传图片显示预览的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta ...
jQuery点击头像上传并预览图片
10-20
本文将详细介绍如何使用jQuery实现点击头像上传并预览图片的功能。 首先，我们需要HTML结构来展示头像和上传按钮。如示例中的HTML代码所示： ```html */*"> ``` 在这个例子中，`...
给img标签动态设置src属性，不生效
感恩、奋进、自信
10-29 2万+
给img标签动态设置src属性，不生效js如下： for(var i = 0; i&lt;len;i++){ var data = datas[i]; var nickname = data.nickname; var avatar = data.avatar; var li_item = ''; if(avatar == null){ // ...
jquery 获取和修改img src路径
学无止境
07-12 1万+
获取：  复制代码代码如下: $("#imgId")[0].src;  修改：  复制代码代码如下: $("#imgId").attr('src',path);
jquery 实现更改图片路径
热门推荐
新儿
02-08 5万+
如何用JS实现 原来是这个图片（01.png）点击之后变成（02.png） 点击另一个（03.png）之后变成(04.PNG) 请教大神们如何实现。。。本人JS小白 请各位帮忙简单写一下 img src="01.png" onclick="changeImg()" id="img"/>function changeImg(){ $("img").attr
图片上传并预览
DeyuanYangjia1314的专栏
07-06 334
$(document).ready(function () { $("#li_0").removeClass("active"); $("#li_1").addClass("active"); }); $(document).ready(function () { $("#li_front")
yolov10预训练模型.rar
11-05
在按照YOLOv10官网上的步骤进行时，运行app.py文件时，如果没有预训练模型的话会报错。解压压缩包里的内容到同级目录下（在requirements.txt文档下面），这样运行后就不会报错。
Linux Socket编程、IO模型及进程间通信的完整实用案例
最新发布
11-05
在IT领域，Linux系统是广泛应用于服务器和嵌入式设备的操作系统。对于系统开发者和管理员，深入理解Linux的Socket编程、IO模型以及进程间通信（IPC）是至关重要的。本资料包提供了三个主要部分的学习资源：`process_comm`涉及进程间通信，`linux_socket`涵盖Socket编程，而`io_mode`则讨论Linux的IO模型。接下来，我们将详细探讨这些关键知识点。 让我们来看看**Linux Socket编程**。Socket是网络通信的基本接口，它允许两个或多个进程通过网络进行数据交换。在Linux中，Socket编程通常涉及到以下步骤：创建Socket，绑定IP地址和端口号，监听连接请求，接受连接，发送和接收数据，最后关闭Socket。`linux_socket`目录可能包含了示例代码，演示如何创建TCP或UDP Socket，处理并发连接，以及实现基本的错误处理机制。理解Socket编程有助于开发网络服务，如Web服务器、FTP服务器等。 我们来讨论**Linux IO模型**。在Linux中，有五种主要的IO模型：阻塞IO、非阻塞IO、IO复用（
apsw-3.38.5.post1-cp310-cp310-win_amd64.whl.rar
11-05
python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件，注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装，如果whl路径不在cmd窗口当前目录下，需要带上路径 WHL文件是以Wheel格式保存的Python安装包， Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包，WHL文件中包含了Python安装的py文件和元数据，以及经过编译的pyd文件， 这样就使得它可以在不具备编译环境的条件下，安装适合自己python版本的库文件。 如果要查看WHL文件的内容，可以把.whl后缀名改成.zip，使用解压软件（如WinRAR、WinZIP）解压打开即可查看。 为什么会用到whl文件来安装python库文件呢？ 在python的使用过程中，我们免不了要经常通过pip来安装自己所需要的包， 大部分的包基本都能正常安装，但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中（whl包下载）下载whl包来安装解决问题。
aiohttp-3.6.2-cp35-cp35m-win32.whl.rar
11-05
python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件，注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装，如果whl路径不在cmd窗口当前目录下，需要带上路径 WHL文件是以Wheel格式保存的Python安装包， Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包，WHL文件中包含了Python安装的py文件和元数据，以及经过编译的pyd文件， 这样就使得它可以在不具备编译环境的条件下，安装适合自己python版本的库文件。 如果要查看WHL文件的内容，可以把.whl后缀名改成.zip，使用解压软件（如WinRAR、WinZIP）解压打开即可查看。 为什么会用到whl文件来安装python库文件呢？ 在python的使用过程中，我们免不了要经常通过pip来安装自己所需要的包， 大部分的包基本都能正常安装，但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中（whl包下载）下载whl包来安装解决问题。
课设毕设基于SpringBoot+Vue的大学生创业项目的信息管理系统源码可运行.zip
11-05
本压缩包资源说明，你现在往下拉可以看到压缩包内容目录 我是批量上传的基于SpringBoot+Vue的项目，所以描述都一样；有源码有数据库脚本，系统都是测试过可运行的，看文件名即可区分项目~ ｜Java｜SpringBoot｜Vue｜前后端分离｜ 开发语言：Java 框架：SpringBoot，Vue JDK版本：JDK1.8 数据库：MySQL 5.7+（推荐5.7，8.0也可以） 数据库工具：Navicat 开发软件： idea/eclipse（推荐idea） Maven包：Maven3.3.9+ 系统环境：Windows/Mac
使用jQuery实现图片上传预览与裁剪功能
详细解析了如何使用jquery和CutPic.js等插件来完成图像的上传、预览、裁剪等操作，并保存到服务器后台的技术实现过程。" 知识点一：图像上传与预览 在Web开发中，图像上传是一个常见的功能。本文件首先介绍了如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蜗牛慢慢向上爬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值