基于js插件的文件上传
2024-08-30 19:23:38
<?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>
最新文章
- [异常解决] windows用SSH和linux同步文件&;linux开启SSH&;ssh client 报 algorithm negotiation failed的解决方法之一
- Keil>; 编译器特有的功能 >; 关键字和运算符 >; __weak
- 最长不下降子序列(LIS)
- java(课程设计之记事本界面部分代码公布)
- web appbuilder 改变样式和添加自定义widget
- codevs 4927 线段树练习5
- HttpWebRequest 模拟登录响应点击事件(分享自己用的HttpHelper类)
- 启用EXCHANGE反垃圾邮件功能和重建EXCHANGE邮件系统帐号
- linux下socket编程-UDP
- svn笔记4属性Properties
- libgdx, mouse 关节
- Windows Search Service
- Kaggle-房价预测
- go 监听系统信号
- C#控制台下测试多线程的源码
- Python零基础入门之Tkinter的对话框
- Device Identifier and Device DNA初识
- android DatagramSocket send 发送数据出错
- 微信公众号内唤起h5支付详解
- ionic2如何升级到最新版本、配置开发环境
热门文章
- robotframework执行用例时,报错selenium.common.exceptions.WebDriverException: Message: unknown error: cannot get automation extension from unknown error: page could not be found: chrome-extension://aapnijgdinl
- lua 与 c 的相互调用
- LayUI table表格控件 如何显示 对象中的属性(针对Mybatis的级联查询--一对一情况)
- Ruby - 创建自己的GEM
- python 面向对象八 多继承
- APP支付宝登录第三方授权如何签约入口在哪里
- SSM框架手动搭建
- Unix\Linux | 总结笔记 |文件系统_shell重定向
- 支付宝添加scheme的方法
- jmeter(十六)Jmeter之Bean shell使用(二)