基于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将本地图片文件预览并上传至阿里云服务 ...
随机推荐
- 关于netty的多个handler链式模式
1. 老规矩, 引入我们喜闻乐见的maven依赖 <dependency> <groupId>io.netty</groupId> <artifactId&g ...
- E20170514-ts
yield n. 产量,产额; moldule n. 模块; 组件; exception n 例外 except prep. 除…外; vt. 把…除外; 不计 accessor 存取器; ...
- bzoj 4819: [Sdoi2017]新生舞会【二分+最小费用最大流】
如果\( b[i]==0 \)那么就是裸的费用流/KM,当然KM快一些但是为什么不写KM呢因为我不会打板子了 考虑二分答案,那么问题变成了判定问题. \[ ans=\frac {a_1+a_2+... ...
- 【练习】Java实现的杨辉三角形控制台输出
import java.util.Scanner; /** * YangHui_tst01 * @author HmLy * @version 000 * - - - - - - - * 练习代码.( ...
- python爬取网页图片（二）
从一个网页爬取图片已经解决,现在想要把这个用户发的图片全部爬取. 首先:先找到这个用户的发帖页面: http://www.acfun.cn/u/1094623.aspx#page=1 然后从这个页面中 ...
- Apple Tree POJ - 2486
Apple Tree POJ - 2486 题目大意:一棵点带权有根树,根节点为1.从根节点出发,走k步,求能收集的最大权值和. 树形dp.复杂度可能是O(玄学),不会超过$O(nk^2)$.(反正这 ...
- AC自动机 HDOJ 5384 Danganronpa
题目传送门 /* 题意:多个文本串,多个模式串在每个文本串出现的次数 AC自动机:这就是一道模板题,杭电有道类似的题目 */ /************************************ ...
- 题解报告：hdu1205吃糖果（插空法）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1205 Problem Description HOHO,终于从Speakless手上赢走了所有的糖果, ...
- ACM_送气球（规律题）
送气球 Time Limit: 2000/1000ms (Java/Others) Problem Description: 为了奖励近段时间辛苦刷题的ACMer,会长决定给正在机房刷题的他们送气球. ...
- ASP.NET CORE 使用 EF CORE访问数据库
asp.net core通过ef core来访问数据库,这里用的是代码优先,通过迁移来同步数据库与模型. 环境:vs2017,win10,asp.net core 2.1 一.从建立asp.net c ...