基于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将本地图片文件预览并上传至阿里云服务 ...
随机推荐
- ie7 总结
1 ie7 对部分属性选择器严重区分大小写 在HTML中,属性名,例如id, title之类是不区分大小写的,CSS中的选择器也应该是如此.但是IE7对属性名是严格区分大小写的! 2 关于属性选择器, ...
- bzoj1756
1756: Vijos1083 小白逛公园 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 1150 Solved: 371[Submit][Statu ...
- jsonp处理跨域
什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”.而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略 ...
- bzoj 1609[Usaco2008 Feb]Eating Together麻烦的聚餐【dp】
设up[i][j]为第i位升序为j的最小修改数,down为降序 #include<iostream> #include<stdio.h> using namespace std ...
- 《windows核心编程系列》二十一谈谈基址重定位和模块绑定
每个DLL和可执行文件都有一个首选基地址.它表示该模块被映射到进程地址空间时最佳的内存地址.在构建可执行文件时,默认情况下链接器会将它的首选基地址设为0x400000.对于DLL来说,链接器会将它的首 ...
- Ubuntu安装配置vsftpd
1. 安装 1. sudo apt-get install vsftpd 2. sudo apt-get install db4.8-util 用于创建虚拟用户 2. 创建用户 创建文 ...
- hdu 4565 So Easy! (共轭构造+矩阵快速幂)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4565 题目大意: 给出a,b,n,m,求出的值, 解题思路: 因为题目中出现了开根号,和向上取整后求 ...
- [BUG]Dreamweaver6做网页的一个图片文字不清晰的问题
自己用Dreamweaver6做一个网页,使用PS做图片,为了节约下载流量,我把图片裁剪为GIF格式,通过系统自带的图片浏览器和美图看看,图片上的文字都是清晰的. 我把图片加载进入DW中后,在DW界面 ...
- 419 Battleships in a Board 甲板上的战舰
给定一个二维的甲板, 请计算其中有多少艘战舰. 战舰用 'X'表示,空位用 '.'表示. 你需要遵守以下规则: 给你一个有效的甲板,仅由战舰或者空位组成. 战舰只能水平或者垂直放置.换句话 ...
- ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件（二）
1. 为啥要做这个点赞插件? praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等, ...