基于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>