<?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. 微信公众平台-文章-app：让创意变为现实，这30个小程序“凭什么”脱颖而出？

    ylbtech-微信公众平台-文章-app:让创意变为现实,这30个小程序“凭什么”脱颖而出? 1.返回顶部 1. 让创意变为现实,这30个小程序“凭什么”脱颖而出? 微信公开课 昨天 创意1:为多种 ...

  2. MySQL中怎么查询一张表的列数

    select count(1) from information_schema.columns where table_schema='dbname' and table_name='tbname;

  3. java笔记之IO2写操作

    IO流的分类 流向: 输入流  读出数据 输出流 写出数据 数据类型 字节流 字节输入流 读取数据 inputstream 字节输出流 写出数据 outputstream 字符流 字符输入流 读取数据 ...

  4. Gym 100548F Color (数论容斥原理+组合数)

    题意:给定 m 种颜色,把 n 盆花排成一直线的花涂色.要求相邻花的颜色不相同,且使用的颜色恰好是k种.问一共有几种涂色方法. 析:首先是先从 m 种颜色中选出 k 种颜色,然后下面用的容斥原理,当时 ...

  5. 用jdbc连接数据库并简单执行SQL语句

    一:版本一.这种存在一个问题就是每执行一次操作都会创建一次Connection链接和且释放一次链接 1:创建pojo对象(OR映射,一个pojo类对应一张数据库表)   package com.yin ...

  6. pytest的参数化

    参数化有两种方式: 1. @pytest.mark.parametrize 2.利用conftest.py里的 pytest_generate_tests 1中的例子如下: @pytest.mark. ...

  7. Ubuntu安装配置vsftpd

    1. 安装    1. sudo apt-get install vsftpd    2. sudo apt-get install db4.8-util   用于创建虚拟用户 2. 创建用户 创建文 ...

  8. _bzoj1012 [JSOI2008]最大数maxnumber【Fenwick Tree】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1012 裸的树状数组. #include <cstdio> #include &l ...

  9. 1、IO概述及File类

  10. WinForm 里面关闭窗体的两个方法的区别 Form.coles()与Application,Exit()