基于js插件的文件上传
<?php /** * Created by PhpStorm. * User: GyCCo. * Date: 05/02/2018 * Time:
4:46 PM */ session_start(); unset($_SESSION[ 'files']); ?>
<!doctype html>
<html>
- <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">
- <title>
- Document
- </title>
- <style>
- .addedFiles{font-size:14px;} #clearAll{color:#f00;} .tagAEdit{color:#167db9
- ;}
- </style>
- </head>
- <body>
- <div class="formCell formInput">
- <div id="filelist" class="">
- </div>
- <div id="container">
- <a id="pickfiles" class="tagAEdit" href="javascript:">
- 添加文件
- </a>
- <a id="clickToUpload" class="" href="javascript:">
- 上传
- </a>
- <a id="clearAll" href="javascript:" class="c-f00">
- 清空
- </a>
- <span class="text-gray left-margin">
- 已选择
- <span id="countFiles">
- 0
- </span>
- 个文件
- </span>
- </div>
- <div id="console">
- </div>
- <input type="hidden" id="picture" class="optionalField" value="">
- </div>
- <script type="text/javascript" src="/js/jquery-1.10.2.min.js">
- </script>
- <script type="text/javascript" src="/js/plupload/plupload.full.min.js">
- </script>
- <script type="text/javascript">
- var countFiles = 0,
- uploadedFiles = 0;
- // Custom example logic
- var uploader = new plupload.Uploader({
- runtimes: 'html5,flash,silverlight,html4',
- browse_button: 'pickfiles',
- // you can pass an id...
- container: document.getElementById('container'),
- // ... or DOM Element itself
- url: 'notify.php',
- multipart: true,
- multipart_params: {},
- flash_swf_url: 'static/js/plupload/Moxie.swf',
- silverlight_xap_url: 'static/js/plupload/Moxie.xap',
- chunk_size: '4mb',
- multi_selection: true,
- // resize : { width : 1080, height : 1080, quality : 60 },
- filters: {
- max_file_size: '1500mb',
- mime_types: [{
- title: "Pdf files",
- extensions: "pdf"
- }
- // {title : "Image files", extensions : "jpg,gif,png,jpeg,bmp,tiff"}
- // {title : "Image files", extensions : "jpg,gif,png"},
- //{title : "Zip files", extensions : "zip"}
- ]
- },
- init: {
- PostInit: function() {
- document.getElementById('filelist').innerHTML = '';
- // $(document).on('change', 'input[type="file"]', function () {
- //
- // uploader.start();
- // return false;
- //
- // });
- $(document).on('click', '#clickToUpload',
- function() {
- uploader.settings.multipart_params.countFiles = countFiles;
- uploader.start();
- return false;
- });
- },
- FilesAdded: function(up, files) {
- plupload.each(files,
- function(file) {
- countFiles++;
- document.getElementById('countFiles').innerHTML = countFiles;
- // $('.uploadedImageContainer').html(plupload.formatSize(file.size) + ' / <span>0</span>%');
- document.getElementById('filelist').innerHTML += '<div id="' + file.id + '" class="addedFiles">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
- });
- },
- UploadProgress: function(up, file) {
- // $('.uploadedImageContainer').find('span').html(file.percent);
- document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
- },
- Error: function(up, err) {
- // message(err.message);
- document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
- },
- FileUploaded: function(up, file, result) {
- // var c = $('.uploadedImage');
- //
- // c.html('<img src="/upload/' + result.response + '">');
- //
- // $('#picture').val(result.response);
- // $('#pickfiles').html('重新上传');
- // $('#getProductPic').removeClass('hide');
- //alert(result.response);
- uploadedFiles++;
- if (countFiles === uploadedFiles) window.parent.postMessage(result.response, "*");
- },
- UploadComplete: function(up, file) {
- // $('#pickfiles').html('重新上传');
- }
- }
- });
- uploader.init();
- $(document).on('click', '#clearAll',
- function() {
- $('.addedFiles').each(function() {
- uploader.removeFile($(this).attr('id'));
- $('#filelist').html('');
- countFiles = 0;
- document.getElementById('countFiles').innerHTML = 0;
- uploadedFiles = 0;
- });
- });
- </script>
- </body>
- </html>
