1. 图片上传
>>>>>>>>>>>>>>>>>>>> 效果图
>>>>>>>>>>>>>>>>>>>> js 实现
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><!-- 记得导入相关的js--><link rel="stylesheet" href="layui.css" media="all"><script src="layui.js" charset="utf-8"></script><script src="layui.all.js" charset="utf-8"></script></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" alt="" width="100px" height="100px"><p id="demoText"></p></div>
</div> <script>
layui.use('upload', function(){var $ = layui.jquery,upload = layui.upload;//普通图片上传var uploadInst = upload.render({elem: '#test1',url: 'https://httpbin.org/post' //改成您自己的上传接口,before: function(obj){//预读本地文件示例，不支持ie8obj.preview(function(index, file, result){$('#demo1').attr('src', result); //图片链接（base64）});},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>2. 文件上传（支持 .word、.pdf、.xls、.txt ）
>>>>>>>>>>>>>>>>>>>> 效果图
>>>>>>>>>>>>>>>>>>>> js实现
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><!-- 注:记得导入js哈--><link rel="stylesheet" href="layui.css" media="all"><script src="layui.js" charset="utf-8"></script><script src="layui.all.js" charset="utf-8"></script></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 layui-btn-normal" id="testList">选择多文件</button> <button type="button" class="layui-btn" id="testListAction">开始上传</button><div class="layui-upload-list"><table class="layui-table"><thead><tr><th>文件名</th><th>大小</th><th>状态</th><th>操作</th></tr></thead><tbody id="demoList"></tbody></table></div>
</div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){var $ = layui.jquery,upload = layui.upload;//普通图片上传var uploadInst = upload.render({elem: '#test1',url: 'https://httpbin.org/post' //改成您自己的上传接口,before: function(obj){//预读本地文件示例，不支持ie8obj.preview(function(index, file, result){$('#demo1').attr('src', result); //图片链接（base64）});},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();});}});//多图片上传upload.render({elem: '#test2',url: 'https://httpbin.org/post' //改成您自己的上传接口,multiple: true,before: function(obj){//预读本地文件示例，不支持ie8obj.preview(function(index, file, result){$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')});},done: function(res){//上传完毕}});//指定允许上传的文件类型upload.render({elem: '#test3',url: 'https://httpbin.org/post' //改成您自己的上传接口,accept: 'file' //普通文件,done: function(res){layer.msg('上传成功');console.log(res);}});upload.render({ //允许上传的文件后缀elem: '#test4',url: 'https://httpbin.org/post' //改成您自己的上传接口,accept: 'file' //普通文件,exts: 'zip|rar|7z' //只允许上传压缩文件,done: function(res){layer.msg('上传成功');console.log(res)}});upload.render({elem: '#test5',url: 'https://httpbin.org/post' //改成您自己的上传接口,accept: 'video' //视频,done: function(res){layer.msg('上传成功');console.log(res)}});upload.render({elem: '#test6',url: 'https://httpbin.org/post' //改成您自己的上传接口,accept: 'audio' //音频,done: function(res){layer.msg('上传成功');console.log(res)}});//设定文件大小限制upload.render({elem: '#test7',url: 'https://httpbin.org/post' //改成您自己的上传接口,size: 60 //限制文件大小，单位 KB,done: function(res){layer.msg('上传成功');console.log(res)}});//同时绑定多个元素，并将属性设定在元素上upload.render({elem: '.demoMore',before: function(){layer.tips('接口地址：'+ this.url, this.item, {tips: 1});},done: function(res, index, upload){var item = this.item;console.log(item); //获取当前触发上传的元素，layui 2.1.0 新增}})//选完文件后不自动上传upload.render({elem: '#test8',url: 'https://httpbin.org/post' //改成您自己的上传接口,auto: false//,multiple: true,bindAction: '#test9',done: function(res){layer.msg('上传成功');console.log(res)}});//拖拽上传upload.render({elem: '#test10',url: 'https://httpbin.org/post' //改成您自己的上传接口,done: function(res){layer.msg('上传成功');layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);console.log(res)}});//多文件列表示例var demoListView = $('#demoList'),uploadListIns = upload.render({elem: '#testList',url: 'https://httpbin.org/post' //改成您自己的上传接口,accept: 'file',multiple: true,auto: false,bindAction: '#testListAction',choose: function(obj){ var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件obj.preview(function(index, file, result){var tr = $(['<tr id="upload-'+ index +'">','<td>'+ file.name +'</td>','<td>'+ (file.size/1024).toFixed(1) +'kb</td>','<td>等待上传</td>','<td>','<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>','<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>','</td>','</tr>'].join(''));//单个重传tr.find('.demo-reload').on('click', function(){obj.upload(index, file);});//删除tr.find('.demo-delete').on('click', function(){delete files[index]; //删除对应的文件tr.remove();uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选});demoListView.append(tr);});},done: function(res, index, upload){if(res.files.file){ //上传成功var tr = demoListView.find('tr#upload-'+ index),tds = tr.children();tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');tds.eq(3).html(''); //清空操作return delete this.files[index]; //删除文件队列已经上传成功的文件}this.error(index, upload);},error: function(index, upload){var tr = demoListView.find('tr#upload-'+ index),tds = tr.children();tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传}});//绑定原始文件域upload.render({elem: '#test20',url: 'https://httpbin.org/post' //改成您自己的上传接口,done: function(res){layer.msg('上传成功');console.log(res)}});
});
</script></body>
</html>3. 文件上传带上传的进度条
>>>>>>>>>>>>>>>>>>>> 效果图
>>>>>>>>>>>>>>>>>>>> js 实现
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><!-- 文件上传 start --><link href="css/iconfont.css" rel="stylesheet" type="text/css"/><link href="css/fileUpload.css" rel="stylesheet" type="text/css"><script src="jquery/2.1.1/jquery.min.js"></script><script type="text/javascript" src="js/fileUpload.js"></script><!-- 文件上传 end --></head><body style=""><h3>关于文件上传的基本演示</h3><div id="fileUploadContent" class="fileUploadContent" isupload="true"></div><script type="text/javascript">let wfu = new WpFileUpload("fileUploadContent");wfu.initUpload({"uploadUrl":"#",//上传文件信息地址"progressUrl":"#",//获取进度信息地址，可选，注意需要返回的data格式如下（{bytesRead: 102516060, contentLength: 102516060, items: 1, percent: 100, startTime: 1489223136317, useTime: 2767}）"scheduleStandard":true,"showSummerProgress":true,"showFileItemProgress":true,"ismultiple":true,"selfUploadBtId":"selfUploadBt"});function testUpload(){wfu.upload();}function getFormData1(){var formData = wfu.getFormData("myform");alert(JSON.stringify(formData));}function getFormData2(){var formData = wfu.getFormDataOfUploadFile("myform");alert(JSON.stringify(formData));}
</script><input id="fileUploadContent_file" type="file" style="visibility:hidden" multiple="multiple" /><input id="fileUploadContent_file" type="file" style="visibility:hidden" multiple="multiple" /><input id="fileUploadContent_file" type="file" style="visibility:hidden" multiple="multiple" /><input id="fileUploadContent_file" type="file" style="visibility:hidden" multiple="multiple" />
</body>
</html>4. 注意
上面的Dome用的js，我有上传到CSDN，但是要积分;或者你可以到网上下载这些js；都可以找的到的;不难的哈;
上面用的 js 和Dome 上传到CSDN啦!;资源地址
https://download.csdn.net/download/LMGD_/12355003
![python成语填空的实验报告怎么写[实习报告]](https://img-blog.csdnimg.cn/img_convert/a6db8dafc3f525e871090d7dc6dc4cdf.jpeg)
