php上传多图⽚即时显⽰,PHP+jQuery+Ajax实现多图⽚上传显
⽰上传进度并⽣成缩。。。
本例⽤到其他2个php class.upload.php和 functions.php还有css和js以及img⽂件
完整实例代码点击此处
效果图如下：
实现代码如下：
JavaScript代码如下：
代码如下:
$(document).ready(function() {
$("#filelist").niceScroll({
cursorwidth: "8px",
cursorborderradius: "0px",
cursoropacitymin: 0.1,
sort是升序还是降序cursoropacitymax: 0.3
});
$(".side-pane").niceScroll({
cursorwidth: "8px",
cursorborderradius: "0px",
cursoropacitymin: 0.1,
cursoropacitymax: 0.3
});
$(".time").timeago();
javascript代码如下：
代码如下:
//
$('#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: '
Upload in Progress ',
css: {
border: 'none',
如何进入网页编辑
backgroundColor: 'none'
},
overlayCSS: {
backgroundColor: '#fff',
opacity: '0',
cursor: 'wait'
jquery下载文件请求}
});
});
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 @camnpr
*/
$('.upload-message').hide();
$('.info-message').hide();
$('#upload_button').show();
$('#filelist_header').show();
$.each(files, function(i, file) {
$('#filelist').append(
'
' +
'
'+file.name + '
'+
'
' + plupload.formatSize(file.size) + '
'+
'
0%
'+
'
' +
'
');
$('#remove_'+file.id).click(function(e) {
$('#'+file.id).hide('slow', function() { ('#'+file.id).remove(); });
});
});
$('#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'
}
});
constitutional crisis}
$('#percent').al.percent+"%");
$('#upRate').al.bytesPerSec/1024)+" kb/sec"); });
uploader.bind('FileUploaded', function(up, file, response) {
var input = $("#uploaded_photos");
var data = sponse;
var details = data.split(',');
if(details[0] == 'success') {
var photo_html = ' '+details[1]+'
';
input.val(input.val() + details[1] + ":");
} else {
var photo_html = '
'+details[1]+'
';
}
$('.side-pane').prepend(photo_html);
$('.time').timeago();
});vbs脚本sleep函数
uploader.bind('UploadComplete', function(up, files) {
$('#upload_info').hide();
$('#filelist').unblock({
onUnblock: function () {
$('#filelist_header').hide();
$('#filelist').html('
ok
All photos have been uploaded. ');
正则方程组求法
}
});
});
// ]]>
上⾯2个js都放在index.php⾥⾯
XML/HTML代码如下：
代码如下:
Name
Size
Status
upload.php页⾯代码如下：
代码如下:<?php
/*
@@ Including the functions.php for using the necessary functions.
*/
include('functions.php');
/
*
@@ This is the file upload class which does all the uploading work.
*/
include('class.upload.php');
if(isset($_FILES["file"])) {
/*
@@ Generating unique name for the photo.
*/
$time = time();
$rand_1 = rand(999, 999999);
$rand_2 = rand(999999, 999999999);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。