完整實(shí)例代碼點(diǎn)擊此處本站下載.PHP應(yīng)用
<script type="text/javascript">?
??????? // <![CDATA[
?
??????????? $('#upload_button').click(function() {
??????????????? $('.side-pane').html('');
??????????????? $('#upload_button').hide();
??????????????? $('#pickfiles').hide();
??????????????? $('#upload_info').show();
??????????????? $('#upload_info').css("display","inherit");
??????????????? uploader.start();
?
??????????????? $('#filelist').block({
??????????????????? message: '<center><div class="start-message">Upload in Progress</div></center>',
??????????????????? css: {
??????????????????????? border: 'none',
??????????????????????? backgroundColor: 'none'
??????????????????? },
??????????????????? overlayCSS: {
??????????????????????? backgroundColor: '#fff',
??????????????????????? opacity: '0',
??????????????????????? cursor: 'wait'
??????????????????? }
??????????????? });
??????????? });
?
??????????? var uploader = new plupload.Uploader({
??????????????? runtimes : 'flash,
html5',
??????????????? browse_button : 'pickfiles',
??????????????? container : 'uploader',
??????????????? max_file_size : '10mb',
??????????????? url : 'upload.php',
??????????????? flash_swf_url : 'uploader/uploader.swf',
??????????????? filters : [
??????????????????? { title : "Image files", extensions : "jpg,jpeg,gif,png" }
??????????????? ]
??????????? });
?
??????????? uploader.bind('Init', function(up, params) {});
??????????? uploader.init();
?
??????????? uploader.bind('FilesAdded', function(up, files) {
??????????????? /*
??????????????????? @@ Show / hide various elements
??????????????? */
??????????????? $('.upload-message').hide();
??????????????? $('.info-message').hide();
??????????????? $('#upload_button').show();
??????????????? $('#filelist_header').show();
?
??????????????? $.each(files, function(i, file) {
??????????????????? $('#filelist').append(
??????????????????????? '<div id="' + file.id + '" class="filecontainer">' +
??????????????????????? '<div class="filename"> '+file.name + '</div>'+
??????????????????????? '<div class="filesize">' + plupload.formatSize(file.size) + '</div>'+
??????????????????????? '<div class="filestatus" id="status_'+file.id+'">0%</div>'+
??????????????????????? '<div class="filedel"><a id="remove_'+file.id+'" href=";"><img src="img/uploader/delete.gif" /></a></div>' +
??????????????????????? '</div>');
?
??????????????????? $('#remove_'+file.id).click(function(e) {
??????????????????????? uploader.removeFile(file)
??????????????????????? $('#'+file.id).hide('slow', function() { ('#'+file.id).remove(); });
??????????????????? });
??????????????? });
?
??????????????? up.refresh();
??????????????? $('#filelist').animate({scrollTop: $('#filelist').attr("scrollHeight")}, 1500);
??????????? });
?
??????????? uploader.bind('UploadProgress', function(up, file) {
??????????????? $('#status_' + file.id).html(file.percent + "%");
??????????????????? if(file.percent == 100) {
??????????????????????? $('#' + file.id).block({
??????????????????????????? message: '',
??????????????????????????? css: {
??????????????????????????????? border: 'none',
??????????????????????????????? backgroundColor: 'none'
??????????????????????????? },
??????????????????????????? overlayCSS: {
??????????????????????????????? backgroundColor: '#fff',
??????????????????????????????? opacity: '0.7',
??????????????????????????????? cursor: 'wait'
??????????????????????????? }
??????????????????????? });
??????????????????? }
??????????????? $('#percent').width(uploader.total.percent+"%");
??????????????? $('#upRate').text(Math.ceil(uploader.total.bytesPerSec/1024)+" kb/sec");
??????????? });
?
??????????? uploader.bind('FileUploaded', function(up, file, response) {
??????????????? var input = $("#uploaded_photos");
??????????????? var data = response.response;
??????????????? var details = data.split(',');
??????????????????? if(details[0] == 'success') {
??????????????????????? var photo_html = '<div class="padding-10 hm-photo clearfix"><a href="../upload/source/'+details[4]+'" target="_blank"><img src="../upload/small/'+details[4]+'"></a><p class="small-text light-text">'+details[1]+'</p><abbr class="time small-text" title="'+details[2]+'"></abbr></div>';
??????????????????????? input.val(input.val() + details[1] + ":");
??????????????????? } else {
??????????????????????? var photo_html = '<div class="clearfix">'+details[1]+'</div>';
??????????????????? }
??????????????? $('.side-pane').prepend(photo_html);
??????????????? $('.time').timeago();
??????????? });
?
??????????? uploader.bind('UploadComplete', function(up, files) {
??????????????? $('#upload_info').hide();
??????????????? $('#filelist').unblock({
??????????????????? onUnblock: function () {
??????????????????????? $('#filelist_header').hide();
??????????????????????? $('#filelist').html('<div style="margin-top: 180px; text-align: center;"><strong>ok</strong><br/>All photos have been uploaded.</div>');
??????????????????? }
??????????????? });
??????????? });
?
??????? // ]]>?
??????? </script>
希望本文所述對大家的PHP+jQuery程序設(shè)計(jì)有所贊助.PHP應(yīng)用
歡迎參與《PHP編程:jquery+php+ajax顯示上傳進(jìn)度的多圖片上傳并生成縮略圖代碼》討論,分享您的想法,維易PHP學(xué)院為您提供專業(yè)教程。