<?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. 【转】python字符串/元组/列表/字典互转

    #-*-coding:utf-8-*- #1.字典 dict = {'name': 'Zara', 'age': 7, 'class': 'First'} #字典转为字符串,返回:<type ' ...

  2. dropZone 回显图片

    初始化dropzone的图片信息 var dropVar = this; var mockFile = { name: "myiamge.jpg", //需要显示给用户的图片名 s ...

  3. vue tab切换demo

    定义tab页面切换的内容 var app=new Vue({ el:'#app', data:{ navTabs:[ { text:"tab1", isActive:true, t ...

  4. bzoj 1079: [SCOI2008]着色方案【记忆化搜索】

    本来打算把每个颜色剩下的压起来存map来记忆化,写一半发现自己zz了 考虑当前都能涂x次的油漆本质是一样的. 直接存五个变量分别是剩下12345个格子的油漆数,然后直接开数组把这个和步数存起来,记忆化 ...

  5. bzoj 3830: [Poi2014]Freight【dp】

    参考:https://blog.csdn.net/zqh_wz/article/details/52953516 妙啊 看成分段问题,因为火车只能一批一批的走(易证= =)设f[i]为到i为止的车都走 ...

  6. bzoj 3206: [Apio2013]道路费用【最小生成树+并查集】

    参考:http://hzwer.com/6888.html 把k条道路权值设为0,和其他边一起跑MST,然后把此时选中的其他边设为必选,在新图中加上必选变缩成k个点,把所有边重标号,枚举k跳边的选取情 ...

  7. bzoj 1179: [Apio2009]Atm【tarjan+spfa】

    明明优化了spfa还是好慢-- 因为只能取一次值,所以先tarjan缩点,把一个scc的点权和加起来作为新点的点权,然后建立新图.在新图上跑spfa最长路,最后把酒吧点的dis取个max就是答案. # ...

  8. poj 3159 Candies dijkstra + queue

    题目链接: http://poj.org/searchproblem 题目大意: 飞天鼠是班长,一天班主任买了一大包糖果,要飞天鼠分发给大家,班里面有n个人,但是学生A认为学生B比自己多的糖果数目不应 ...

  9. C++默认函数与函数重载

    一.默认参数 在C++中,可以为参数指定默认值.在函数调用时没有指定与形参相对应的实参时, 就自动使用默认参数. 默认参数的语法与使用:(1)在函数声明或定义时,直接对参数赋值.这就是默认参数: (2 ...

  10. Acitivty四种启动模式

    Acitivty的四种启动模式 在清单文件中声明 Activity 时,您可以使用 <activity> 元素的 launchMode 属性指定 Activity 应该如何与任务关联. l ...