上傳 · PHP WEB開發日常筆記

``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"> </script> <script src="/js/hdjs/js/vue.js"></script> <script> //HDJS組件需要的配置 hdjs = { 'base': '/js/hdjs', //上傳組件目錄 'uploader': "{:url('/component/upload/uploader')}", //上傳路由 'filesLists': "{:url('/component/upload/filesLists')}?",//獲取上傳的文件 'ossSign': "{:url('system/component/sign')}?",//上傳文件到阿里云oss }; </script> <script src="/js/hdjs/app/util.js"></script> <script src="/js/hdjs/require.js"></script> <script src="/js/hdjs/config.js"></script> <title>文件上傳</title> </head> <body> <form action="/index/index/file" method="post" class="form-horizontal" role="form"> <h1 class="text-center">文件上傳</h1> <div class="container"> <div class="form-group"> <label for="inputID" class="col-sm-2 control-label">單圖上傳</label> <div class="col-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="list_image" value=""> <div class="input-group-btn"> <button onclick="upImage(this)" class="btn btn-default" type="button">選擇圖片</button> </div> </div> <div class="input-group" style="margin-top:5px;"> <img src="/js/hdjs/nopic.jpg" class="img-responsive img-thumbnail" width="150"> <em class="close" style="position:absolute; top: 0px; right: -14px;" title="刪除這張圖片" onclick="removeImg(this)">×</em> </div> </div> <script> //上傳圖片 function upImage(obj) { require(['util'], function (util) { options = { multiple: true,//是否允許多圖上傳 }; util.image(function (images) { //上傳成功的圖片，數組類型 $("[name='list_image']").val(images[0]); $(".img-thumbnail").attr('src', images[0]); }, options) }); } //移除圖片 function removeImg(obj) { $(obj).prev('img').attr('src', '/static/images/nopic.jpg'); $(obj).parent().prev().find('input').val(''); } </script> </div> <br> <br> <div class="form-group" style="padding-left:120px"> <label for="inputID" class=" control-label">多圖上傳:</label> <style> #box img { width: 200px; float: left; margin-right: 10px; border: solid 1px #999; padding: 10px; height: 200px; } #box .bb { width: 220px; /*margin-left: 100px;*/ float: left; margin-right: 10px; border: solid 1px #999; padding: 10px; height: 240px; } </style> <button onclick="upImages(this)" class="btn btn-default" type="button">選擇圖片</button> <div id="box"></div> <script> //上傳圖片 function upImages(obj) { require(['util'], function (util) { util.image(function (images) { $(images).each(function (k, v) { //增加appendTo('#box')方法在被選元素的結尾（仍然在內部）插入指定內容 $("<div class='bb'><img src='" + v + "'/><button class='btn btn-danger btn-xs' style='margin-top:5px' onclick='removeImg(this)'>刪除</button><textarea name='content_images[]' hidden cols='30' rows='10' >" + v + "</textarea></div>").appendTo('#box'); }) }, { //上傳多圖 multiple: true, }) }); } //移除圖片 function removeImg(obj) { // 刪除父級元素 $(obj).parent('.bb').detach(); // 刪除prev獲得匹配元素集合中每個元素緊鄰的前一個同胞元素 $(obj).prev('textarea').detach(); } </script> </div> <div class="form-group"> <label for="inputID" class="col-sm-2 control-label">百度編輯器:</label> <div class="col-sm-10"> <textarea id="container" name="content"></textarea> <script> util.ueditor('container', {hash: 2, data: 'hd'}, function (editor) { //這是回調函數 editor是百度編輯器實例 }); </script> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">文件上傳:</label> <div class="col-sm-10"> <div class="panel panel-default" id="app"> <div class="panel-heading"> <h3 class="panel-title">多文件上傳</h3> </div> <div class="panel-body"> <div class="panel panel-default" v-for="(v,k) in videos"> <div class="panel-body"> <div class="form-group"> <label for="" class="col-sm-2 control-label">文件地址</label> <div class="col-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="path" v-model="v.path"> <span class="input-group-btn"> <button class="btn btn-default" type="button" :id="v.id">上傳文件</button> </span> </div> </div> </div> </div> <div class="panel-footer"> <button class="btn btn-success btn-sm" @click.prevent="del(k)">重新選擇</button> </div> <div class="col-sm-8" :id="'percentage'+v.id" hidden="hidden"> 上傳進度 <b></b> </div> </div> </div> <div class="panel-footer"> <button class="btn btn-default" @click.prevent="add">添加文件</button> </div> </div> </div> </div> <div class="form-group"> <label for="inputID" class="col-sm-2 control-label">單文件上傳</label> <div class="col-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="file" value=""> <div class="input-group-btn"> <button class="btn btn-default" id="pickVideo" type="button">選擇文件</button> </div> </div> </div> </div> </div> </form> <script> require(['vue'], function (Vue) { new Vue({ el: '#app', //抓元素 data: { videos: [ // {title: '', path: ''} //數據 ] }, methods: { //方法 add: function () { var field = {title: '', path: '', id: 'hd' + Date.parse(new Date())}; this.videos.push(field); setTimeout(function () { upload(field); }, 200) }, del: function (k) { this.videos.splice(k, 1); } } }) }); function upload(field) { require(['oss'], function (oss) { var id = '#' + field.id; var uploader = oss.upload({ //獲取簽名 serverUrl: "{:url('component/upload/sign')}?", //上傳目錄 dir: 'video/', //按鈕元素 pick: id, accept: { title: '', // extensions: 'mp4', // mimeTypes: 'video/mp4' } }); //上傳開始 uploader.on('startUpload', function () { console.log('開始上傳'); }); //上傳成功 uploader.on('uploadSuccess', function (file, response) { field.path = oss.oss.host + '/' + oss.oss.object_name; console.log('上傳完成,文件名:' + oss.oss.host + '/' + oss.oss.object_name); }); //上傳中 uploader.on('uploadProgress', function (file, percentage) { $("#percentage" + field.id).show().find('b').text(parseInt(percentage * 100) + '%'); console.log('上傳中,進度:' + parseInt(percentage * 100)); }) //上傳結束 uploader.on('uploadComplete', function () { $("#percentage" + field.id).hide(); console.log('上傳結束'); }) }); } </script> <script> function uploadFile() { require(['oss'], function (oss) { var id = '#pickVideo'; var uploader = oss.upload({ //獲取簽名 serverUrl: "{:url('component/upload/sign')}?", //上傳目錄 dir: 'file/test/', //按鈕元素 pick: id }); //上傳開始 uploader.on('startUpload', function () { console.log('開始上傳'); }); //上傳成功 uploader.on('uploadSuccess', function (file, response) { console.log('上傳完成,文件名:' + oss.oss.host + '/' + oss.oss.object_name); }); //上傳中 uploader.on('uploadProgress', function (file, percentage) { console.log('上傳中,進度:' + parseInt(percentage * 100)); }) //上傳結束 uploader.on('uploadComplete', function () { console.log('上傳結束'); }) }); } uploadFile(); </script> </body> </html> ```