<?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. 2.jeesite增删改查

    一.准备数据 在数据库中中添加一张表和数据,以mysql为例 SET NAMES utf8; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------- ...

  2. ChartCtrl源码剖析之——CChartAxisLabel类

    CChartAxisLabel类用来绘制轴标签,上.下.左.右都可以根据实际需要设置对应的轴标签.它处于该控件的区域,如下图所示: CChartAxisLabel类的头文件. #if !defined ...

  3. CodeForces 730H Delete Them (暴力)

    题意:给定n个名字,然后让你删除 m 个,且这m个必须满足同一个表达式且其他的不满足,问你能不能找到一个满足条件. 析:很明显首先知道的是这 m 个如果第 i 个位置相同,那么就肯定选这个位置是最好的 ...

  4. unity3d中对像之间的相互作用的实现

    首先这里的对像是面向对像中的对像: 其实就是C#中对像间相互作用的实现: 一.一般面向对像中关联和依赖的方式: 如关联方式: class A{ B m_B; A(B b){ m_B = b; } ac ...

  5. 利用插件（jQuery-ui.js）实现表格行的拖拽排序

    template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...

  6. element-ui公用模态框自定义样式与scoped样式生效问题解决方案

    //先插如效果图 里面内容均为传进来的.包括取消与确定按钮,因为每个页面的绑定事件不一样. //下面这个图片为初始样式 //拖动模态框指令需要插件.详情看我下一篇,以下是地址 https://www. ...

  7. Zznu 1913: yifan and matrix (多路归并)

    题目链接: 1913: yifan and matrix 题目描述: 有一个n*n的矩阵,在每一行取出一个数,可以得到n个数的和,问前n小的和分别是多少? 解题思路: 对于两个数组a[n],b[n], ...

  8. echart分组柱形图绑定数据

    <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts </ ...

  9. String的用法——转换功能

    package cn.itcast_05; /* String类的转换功能: byte[] getByte():把字符串转换成字节数组 复习: public String(byte[] bytes): ...

  10. 用nowrap实现div内的元素不换行

    在编写自定义插件my-slider的过程中,发现无论float还是inline-block均不能保证div内的内容不换行(这两个属性在内容超出容器尺寸后,均将剩余内容做换行处理),在浏览器内比较了自己 ...