<?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. robotframework 随机选中下拉框中的值

    示例脚本: click element id=provinceName #点击地区 省 wait until element is enabled xpath=.//*[@id='provinceNa ...

  2. word2vec中的数学原理（转）

  3. 03_隐式意图打开activity

    想让第一个activity把第二个activity打开的话,在清单文件里面声明一下并且 右键Debug As Android Application居然没有报错 mimeType  讲HTML的时候就 ...

  4. idea 快捷键以及包含字符串文件搜索

    1.idea也有一个类似于eclipse的包含字符串文件搜索(特别实用) idea 里按快捷键:ctrl+H 2.下图是idea的快捷键汇总 3.debug调试 F5:跳入方法   F6:向下逐行调试 ...

  5. 洛谷 P4009 汽车加油行驶问题 【最小费用最大流】

    分层图,建k层,设(i,j,0)为点(i,j)的满油状态,全图的流量都是1,因为重复走到一个点没有意义.如果当前点是加油站,那么它向它上左的点连费用为a的边,向下右连费用为a+b的边: 否则,这个点的 ...

  6. 原生js一行代码实现简易轮播图

    这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...

  7. 我的周记5——"侵略如火，不动如山"

    这周发生的事儿 最近同事晋升的参加答辩,还有的同事要转岗走了.难受... 有时候自己常常想,我是不是应该也要走了. 这儿的人好优秀呀,又舍不得离开.但是这里太安逸了,接触不到技术,靠自学呢 又感觉力不 ...

  8. 安装privoxy后curl 操作

    如果讲privoxy服务关掉 sudo /etc/init.d/privoxy restart 这时候发现 curl www.baidu.com 也没法正常工作,直接显示的是无法连接到相应端口还是 主 ...

  9. linux　前台后台程序切换命令总结

    1.在Linux终端运行命令的时候,在命令末尾加上 & 符号,就可以让程序在后台运行 root@Ubuntu$ ./tcpserv01 & 2.如果程序正在前台运行,可以使用 Ctrl ...

  10. Codeforces Round #318 [RussianCodeCup Thanks-Round] (Div. 2)

    以后每做完一场CF,解题报告都写在一起吧   暴力||二分 A - Bear and Elections 题意:有n个候选人,第一个候选人可以贿赂其他人拿到他们的票,问最少要贿赂多少张票第一个人才能赢 ...