ホームページ >ウェブフロントエンド >jsチュートリアル >Lauiui が画像のアップロードと画像プレビューを実装する方法 (純粋なコード)
この記事の内容は、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(['upload','jquery'], function(){ var $ = layui.$, upload = layui.upload; //普通图片上传 var uploadInst = upload.render({ elem: '#test1' ,url: '/upload/' ,before: function(obj){//文件上传前的回调 //预读本地文件示例,不支持ie8 obj.preview(function(index, file, result){ $('#demo1').attr('src', result); //图片链接(base64)直接将图片地址赋值给img的src属性 }); } ,done: function(res){ //如果上传失败 if(res.code > 0){ return layer.msg('上传失败'); } //上传成功 } ,error: function(){ //演示失败状态,并实现重传 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function(){ uploadInst.upload(); }); } }); }); </script> </body> </html>
画像プレビューの実装、ファイルを選択した後のコールバックと画像をアップロードする前のコールバックの両方を実装できます:
obj.preview(function(index, file, result){ //index表示文件索引 //file表示文件信息 //result表示文件src地址 $('#demo1').attr('src', 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(['upload','jquery'], function(){ var $ = layui.$, upload = layui.upload; //普通图片上传 var uploadInst = upload.render({ elem: '#choose'//选择文件的DOM对象 ,auto: false //选择文件后不自动上传 ,bindAction: '#load' //指向一个按钮触发上传 ,url: '/upload/' ,choose:function(obj){//选择文件的回调,obj为选中的文件 //将每次选择的文件追加到文件队列 var files = obj.pushFile(); //预览选中的文件(本地文件) obj.preview(function(index,file,result){ $('#demo1').attr('src', result); }); } ,before: function(obj){//文件上传前的回调 } ,done: function(res){ //如果上传失败 if(res.code > 0){ return layer.msg('上传失败'); } //上传成功 } ,error: function(){ //演示失败状态,并实现重传 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function(){ uploadInst.upload(); }); } }); }); </script> </body> </html>
ボタンによってアップロードが開始されます。表示されプレビューされたら、[アップロード] をクリックして画像をアップロードします:
関連のおすすめ:
js で Excel をエクスポートおよびインポートする方法jsでExcelをインポート、エクスポートする方法(純粋なコード)
以上がLauiui が画像のアップロードと画像プレビューを実装する方法 (純粋なコード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。