<?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插件的文件上传的更多相关文章

  1. js插件---IUpload文件上传插件（包括图片）

    js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...

  2. PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  3. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...

  4. Servlet3.0学习总结——基于Servlet3.0的文件上传

    Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileu ...

  5. Struts2文件上传（基于表单的文件上传）

    •Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目   •Commons-Fil ...

  6. [原创]java WEB学习笔记49：文件上传基础，基于表单的文件上传,使用fileuoload 组件

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  7. WordPress Contact Form 7插件任意文件上传漏洞

    漏洞名称: WordPress Contact Form 7插件任意文件上传漏洞 CNNVD编号: CNNVD-201311-415 发布时间: 2013-11-28 更新时间: 2013-11-28 ...

  8. 用c++开发基于tcp协议的文件上传功能

    用c++开发基于tcp协议的文件上传功能 2005我正在一家游戏公司做程序员,当时一直在看<Windows网络编程> 这本书,把里面提到的每种IO模型都试了一次,强烈推荐学习网络编程的同学 ...

  9. JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

    JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...

随机推荐

  1. zoj3777(状态压缩)

    题目阐述: 给定n个座位,n个人,每个人可以做n个位置中的任意一个,P[i][j]代表第i个人做第j个位置获得的分数,求有多少种排列方式使得获得的分数大于等于M. 这道题跟数位dp的思想很像,都是穷举 ...

  2. 【194】Windows 上使用 wget

    本文包括两部分,首先就是在 Windows 使用 wget 来下载文件,这样固然很好,然而问题并非这么简单,在 PowerShell 4.0 版本中增加了 Invoke-WebRequest 的别名 ...

  3. ubuntu 怎么格式化U盘？（转载）

    转自:http://3168247.blog.51cto.com/3158247/605654 图形的话装一个gparted,找那个/dev/sdb,右击选择格式化,最后点“应用”.命令行:原则是先卸 ...

  4. bzoj 2423: [HAOI2010]最长公共子序列【dp+计数】

    设f[i][j]为a序列前i个字符和b序列前j个字符的最长公共子序列,转移很好说就是f[i][j]=max(f[i-1][j],f[i][j-1],f[i-1][j-1]+(a[i]==b[j])) ...

  5. bzoj 2811: [Apio2012]Guard【线段树+贪心】

    关于没有忍者的区间用线段树判就好啦 然后把剩下的区间改一改:l/r数组表示最左/最右没被删的点,然后删掉修改后的左边大于右边的:l升r降排个序,把包含完整区间的区间删掉: 然后设f/g数组表示i前/后 ...

  6. 【练习】Java实现的杨辉三角形控制台输出

    import java.util.Scanner; /** * YangHui_tst01 * @author HmLy * @version 000 * - - - - - - - * 练习代码.( ...

  7. Activiti6.0教程 28张表解析 （三）

    使用Activit的朋友都知道Activiti对应的有28张表,今天我们就来说下Activit中28张表对应的含义是什么? 如何创建表? 在Activiti中创建表有三种方式,我们依次来看下: 一.通 ...

  8. 洛谷 P3332 [ZJOI2013]K大数查询 || bzoj3110

    用树套树就很麻烦,用整体二分就成了裸题.... 错误: 1.尝试线段树套平衡树,码农,而且n*log^3(n)慢慢卡反正我觉得卡不过去 2.线段树pushdown写错...加法tag对于区间和的更新应 ...

  9. Spring配置文件中未引入dubbo命名空间头部配置而引起的错误案例

    问题描述: Spring配置文件中未引入dubbo命名空间的头部配置而引起项目启动时报出如下错误信息: org.springframework.beans.factory.xml.XmlBeanDef ...

  10. rhel7安装oracle 11gR2，所需的依赖包

    binutils-2.23.52.0.1-30.el7.x86_64 compat-libstdc++-33-3.2.3-61.x86_64compat-libstdc++-33-3.2.3-61.i ...