찾다

집  >  기사  >  웹 프론트엔드  >  Layui가 이미지 업로드 및 이미지 미리보기를 구현하는 방법(순수 코드)

Layui가 이미지 업로드 및 이미지 미리보기를 구현하는 방법(순수 코드)

不言
不言원래의
2018-08-13 17:27:0810309검색

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로 엑셀 가져오고 내보내는 방법(순수 코드)

js(코드)로 드롭다운 메뉴를 좌우로 이동하는 방법

위 내용은 Layui가 이미지 업로드 및 이미지 미리보기를 구현하는 방법(순수 코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：js를 사용하여 Excel을 내보내고 가져오는 방법은 무엇입니까? js를 사용하여 Excel을 가져오고 내보내는 방법(순수 코드)다음 기사：js를 사용하여 Excel을 내보내고 가져오는 방법은 무엇입니까? js를 사용하여 Excel을 가져오고 내보내는 방법(순수 코드)

관련 기사

더보기