基于js插件的文件上传

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

js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传过程,同时支撑多文 ...
Servlet3.0学习总结——基于Servlet3.0的文件上传
Servlet3.0学习总结(三)——基于Servlet3.0的文件上传在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileu ...
Struts2文件上传（基于表单的文件上传）
•Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目 •Commons-Fil ...
[原创]java WEB学习笔记49：文件上传基础，基于表单的文件上传,使用fileuoload 组件
本博客为原创:综合尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和网络上的现有资源(博客,文档,图书等),资源的出处我会标明本博客的目的:①总结自己的学习过程,相当 ...
WordPress Contact Form 7插件任意文件上传漏洞
漏洞名称: WordPress Contact Form 7插件任意文件上传漏洞 CNNVD编号: CNNVD-201311-415 发布时间: 2013-11-28 更新时间: 2013-11-28 ...
用c++开发基于tcp协议的文件上传功能
用c++开发基于tcp协议的文件上传功能 2005我正在一家游戏公司做程序员,当时一直在看<Windows网络编程> 这本书,把里面提到的每种IO模型都试了一次,强烈推荐学习网络编程的同学 ...
JavaScript进阶(九)JS实现本地文件上传至阿里云服务器
JS实现本地文件上传至阿里云服务器前言在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...

随机推荐

hdu 1284
钱币兑换问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
【WIP】markdown
创建: 2018/03/18 [任务表]TODO 这个博客从来不点发布到首页, 完全100%自用, 全部详细完整的干货.千辛万苦找到这里看到一片空白, 是不是很愤怒? 那就对啦233333
hdu 3007【最小圆覆盖-随机增量法模板】
#include<iostream> #include<cstdio> #include<cmath> #include<algorithm> usin ...
跨域时发送预检请求，tp5的restful无options方法的解决方案
解决跨域问题解决问题:使用vue-resource发送delete请求时报options请求404 思考:明明发送的是delete请求,为何变成了options请求? 答:跨域情况下,PUT,DE ...
icons使用
1.将选中图标加入项目 2.unicode方式查看连接在线连接 3.复制代码到样式表 4.引用样式,并设置I标签,颜色和大小可以通过设置i标签color和font-size进行调整 <i cla ...
magento 用程序生成优惠劵码
参考自http://fragmentedthought.com/fragments/programatically-creating-sales-rule-coupon-code 上面的代码只能生成C ...
Service官方教程(8)Bound Service示例之2－跨进程使用Messenger
Compared to AIDL When you need to perform IPC, using a Messenger for your interface is simpler than ...
iOS开发系列--通知与消息机制--转
来自:http://www.cocoachina.com/ios/20150318/11364.html 概述在多数移动应用中任何时候都只能有一个应用程序处于活跃状态,如果其他应用此刻发生了一些用户 ...
[转]asp.net MVC helper 和自定义函数@functions小结
本文转自:http://www.cnblogs.com/jiagoushi/p/3904995.html asp.net Razor 视图具有.cshtml后缀,可以轻松的实现c#代码和html标签的 ...
vs2015如何添加webservice 的web服务引用

基于js插件的文件上传

基于js插件的文件上传的更多相关文章

随机推荐

热门专题