搜尋

首頁 >web前端 >js教程 >layui如何實現圖片的上傳以及圖片預覽（純程式碼）

layui如何實現圖片的上傳以及圖片預覽（純程式碼）

不言
不言原創
2018-08-13 17:27:0810351瀏覽

這篇文章帶給大家的內容是關於layui如何實現圖片的上傳以及圖片預覽（純程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

1.選擇檔案後自動上傳

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="../../layui/css/layui.css"/>
    </head>
    <body>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
          <legend>常规使用：普通图片上传</legend>
        </fieldset>
         
        <div class="layui-upload">
          <button type="button" class="layui-btn" id="test1">上传图片</button>
          <div class="layui-upload-list">
              <!--预览图片-->
            <img class="layui-upload-img" id="demo1">
            <!--提示上传信息-->
            <p id="demoText"></p>
          </div>
        </div>   
        
        <script type="text/javascript" src="../../layui/layui.js"></script>
        <script>
            layui.use([&#39;upload&#39;,&#39;jquery&#39;], function(){
                var $ = layui.$,
                upload = layui.upload;
                
                 //普通图片上传
                  var uploadInst = upload.render({
                    elem: &#39;#test1&#39;
                    ,url: &#39;/upload/&#39;
                    ,before: function(obj){//文件上传前的回调
                      //预读本地文件示例，不支持ie8
                      obj.preview(function(index, file, result){
                        $(&#39;#demo1&#39;).attr(&#39;src&#39;, result); //图片链接（base64）直接将图片地址赋值给img的src属性
                      });
                    }
                    ,done: function(res){
                      //如果上传失败
                      if(res.code > 0){
                        return layer.msg(&#39;上传失败&#39;);
                      }
                      //上传成功
                    }
                    ,error: function(){
                      //演示失败状态，并实现重传
                      var demoText = $(&#39;#demoText&#39;);
                      demoText.html(&#39;<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>&#39;);
                      demoText.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, function(){
                        uploadInst.upload();
                      });
                    }
                  });
            });
        </script>
    </body>
</html>

圖片預覽實現，在選擇檔案後的回呼和圖片上傳前的回呼都可以實現：

obj.preview(function(index, file, result){
                        //index表示文件索引
                        //file表示文件信息
                        //result表示文件src地址
				        $(&#39;#demo1&#39;).attr(&#39;src&#39;, result); //图片链接（base64）直接将图片地址赋值给img的src属性
				      });

點擊上傳圖片後，選擇圖片，直接上傳：

2.選擇檔案後不自動上傳，透過按鈕觸發上傳

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../layui/css/layui.css"/>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		  <legend>常规使用：普通图片上传</legend>
		</fieldset>
		 
		<p class="layui-upload">
		  <button type="button" class="layui-btn" id="choose">选择文件</button>
		  <p class="layui-upload-list">
		  	<!--预览图片-->
		    <img class="layui-upload-img" id="demo1">
		    <!--提示上传信息-->
		    <p id="demoText"></p>
		  </p>
		  <button type="button" class="layui-btn" id="load">上传</button>
		</p>   
		
		<script type="text/javascript" src="../../layui/layui.js"></script>
		<script>
			layui.use([&#39;upload&#39;,&#39;jquery&#39;], function(){
				var $ = layui.$,
				upload = layui.upload;
				
				 //普通图片上传
				  var uploadInst = upload.render({
				    elem: &#39;#choose&#39;//选择文件的DOM对象
				    ,auto: false //选择文件后不自动上传
				    ,bindAction: &#39;#load&#39; //指向一个按钮触发上传
				    ,url: &#39;/upload/&#39;
				    ,choose:function(obj){//选择文件的回调，obj为选中的文件
				    	//将每次选择的文件追加到文件队列
    					var files = obj.pushFile();
    					
    					//预览选中的文件（本地文件）
    					obj.preview(function(index,file,result){
    						 $(&#39;#demo1&#39;).attr(&#39;src&#39;, result); 
    					});
				    }
				    ,before: function(obj){//文件上传前的回调
				      
				    }
				    ,done: function(res){
				      //如果上传失败
				      if(res.code > 0){
				        return layer.msg(&#39;上传失败&#39;);
				      }
				      //上传成功
				    }
				    ,error: function(){
				      //演示失败状态，并实现重传
				      var demoText = $(&#39;#demoText&#39;);
				      demoText.html(&#39;<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>&#39;);
				      demoText.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, function(){
				        uploadInst.upload();
				      });
				    }
				  });
			});
		</script>
	</body>
</html>

點擊選擇檔案後，選擇圖片，選取的圖片能顯示出來預覽，再點選上傳，即將圖片上傳：

相關推薦：

js如何匯出以及匯入excel？ js導入導出excel的方法（純程式碼）

js如何實現下拉式選單的左右移動（程式碼）

#

以上是layui如何實現圖片的上傳以及圖片預覽（純程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：js如何來匯出以及匯入excel？ js導入導出excel的方法（純程式碼）下一篇：js如何來匯出以及匯入excel？ js導入導出excel的方法（純程式碼）

相關文章

看更多