基于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>
基于js插件的文件上传的更多相关文章
- js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- Servlet3.0学习总结——基于Servlet3.0的文件上传
Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileu ...
- Struts2文件上传（基于表单的文件上传）
•Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目 •Commons-Fil ...
- [原创]java WEB学习笔记49：文件上传基础，基于表单的文件上传,使用fileuoload 组件
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- WordPress Contact Form 7插件任意文件上传漏洞
漏洞名称: WordPress Contact Form 7插件任意文件上传漏洞 CNNVD编号: CNNVD-201311-415 发布时间: 2013-11-28 更新时间: 2013-11-28 ...
- 用c++开发基于tcp协议的文件上传功能
用c++开发基于tcp协议的文件上传功能 2005我正在一家游戏公司做程序员,当时一直在看<Windows网络编程> 这本书,把里面提到的每种IO模型都试了一次,强烈推荐学习网络编程的同学 ...
- JavaScript进阶(九)JS实现本地文件上传至阿里云服务器
JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...
随机推荐
- mysql同步延迟导致的问题
前几天又遇到一个mysql读写分离的坑, 在将数据写入master后,因为存在同步延迟,所以如果立马去从库查询刚刚插入的数据可能会出现查询不到数据的情况, 解决办法:强制从主库读取数据,将插入和查询放 ...
- bzoj 4318: OSU!【期望dp】
思路有点眼熟啊,就是设l1记录长为x的极长全1串贡献x的答案,l2记录长为x的极长全1串贡献x^2的答案,f记录真正的答案 转移的话根据n-(n-1)=1,n^2-(n-1)^2=2n-1,n^3-( ...
- 4800: [Ceoi2015]Ice Hockey World Championship(折半搜索)
4800: [Ceoi2015]Ice Hockey World Championship Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 622 S ...
- unsign 字段相减出现负数解决方法
在项目中做数据统计的时候需要用到几个字段相减得到想要的值,但是因为字段都是无符号,相减出现mysql 错误 BINGINT UNSIGNED VALUE .. 在c语言中两个无符号相减值为负数,该值 ...
- [App Store Connect帮助]七、在 App Store 上发行（3.2）提交至“App 审核”：查看 App 状态历史记录
您可以查看您 App 的某一版本的 App 状态历史记录.在历史记录表中的每一行都包含 App 状态.App 状态更改时间,以及更改的发起人.使用此信息追踪“App 审核”流程中的 App. 若想在 ...
- php 打包下载
<?php class zipfile { var $datasec = array (); var $ctrl_dir = array (); var $eof_ctrl_dir = &quo ...
- docker学习教程
我们的docker学习教程可以分为以下几个部分,分别是: 第一:docker基础学习 第二:docker日志管理 第三:docker监控管理 第四:docker三剑客之一:docker-machine ...
- python的Debug调试
先打开Shell的Debug-->Debugger调试, 然后点击程序的运行 点击Debug的step按钮查看每一步的结果
- [POI2008]KUP
Description 给一个\(n\times n\)的地图,每个格子有一个价格,找一个矩形区域,使其价格总和位于[k,2k] Input 输入k n(n<2000)和一个\(n\times ...
- google breakpad 使用初步总结
项目地址:https://code.google.com/p/google-breakpad/ 访问不了请挂VPN 这是一个由google主导的开源项目,官方介绍为:An open-source ...