jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
边永贞
本文向大家介绍jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码，包括了jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码的使用技巧和注意事项，需要的朋友参考一下
本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件
完整实例代码点击此处本站下载。
效果图如下：
实现代码如下：
JavaScript代码如下：
<script type="text/javascript">
$(document).ready(function() {
$("#filelist").niceScroll({
cursorwidth: "8px",
cursorborderradius: "0px",
cursoropacitymin: 0.1,
cursoropacitymax: 0.3
});
$(".side-pane").niceScroll({
cursorwidth: "8px",
cursorborderradius: "0px",
cursoropacitymin: 0.1,
cursoropacitymax: 0.3
});
$(".time").timeago();
});
</script>
javascript代码如下：
<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="javascript:;"><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>
上面2个js都放在index.php里面
XML/HTML代码如下：
<div id="uploader" class="main-pane"> <div id="filelist_header" class="clearfix"> <div class="filename">Name</div> <div class="filesize">Size</div> <div class="filestatus">Status</div> <div class="filedel"></div> <div></div> </div> <div id="filelist"></div> <div class="action-btns"> <a id="pickfiles" class="login-button btn">Select files to upload</a> <a href="javascript:;" id="upload_button" class="login-button upload hide">Upload</a> </div> <center> <div id="upload_info"> <div id="upload_info_inner"> <div class="progressbg"> <div id="percent" class="progress"></div> </div> </div> <div id="unknown"> <div id="time2go"></div> <div id="upRate"></div> </div> </div> </center> <form method="POST" action="process.php" id="processupload"> <input type="hidden" name="uploaded_photos" id="uploaded_photos" /> <input type="hidden" name="fkey" value="<?php echo $fkey; ?>" /> </form> </div>
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);
$rand_3 = rand();
$unique_value = $time.'_'.$rand_1.'_'.$rand_2.'_'.$rand_3;
/*
@@ Folder creation for each and every day. This ensures performance even with millions of images.
*/
$folder = date('zY');
if(substr($folder, 0) == 0) {
$folder = '367'.date('Y');
}
/*
@@ This folder is for the source image files.
*/
$pfolder = '../upload/source/';
if(!is_dir($pfolder)) {
mkdir($pfolder, 0755);
}
/*
@@ This folder is for the image files with 120x120 dimensions.
*/
$tfolder = '../upload/small/';
if(!is_dir($tfolder)) {
mkdir($tfolder, 0755);
}
/*
@@ Assigning the upload file to the upload class for all the processing.
*/
$handle = new Upload($_FILES["file"]);
if($handle->uploaded) {
$extension = $handle->file_src_name_ext;
$mime = $handle->file_src_mime;
if(($mime == 'image/gif') || ($mime == 'image/jpg') || ($mime == 'image/png') || ($mime == 'image/bmp') || ($mime == 'image/pjpeg') | ($mime == 'image/jpeg')) {
/*
@@ Check if the uploaded filetype is an image or not.
*/
if(($extension == 'gif') || ($extension == 'jpg') || ($extension == 'jpeg') || ($extension == 'png') || ($extension == 'bmp') || ($extension == 'pjpeg')) {
if($handle->image_src_x > 500) {
/*
@@ Check if the filesize is smaller than 10 MB. 10 MB = 10485760 bytes.
*/
if($handle->file_src_size < 10485760) {
/*
@@ Getting the actual file name (with and without extension) and sanitizing it for inserting in the database.
*/
$real_name = clean_input($handle->file_src_name);
$body_name = clean_input($handle->file_src_name_body);
$handle->file_new_name_body = $unique_value.'_'.$body_name;
$handle->Process($pfolder);
$handle->image_resize = true;
$handle->image_ratio_crop = 'T';
$handle->image_y = 120;
$handle->image_x = 120;
$handle->file_new_name_body = $unique_value.'_'.$body_name;
$handle->Process($tfolder);
if($handle->processed) {
$actual_name = $handle->file_dst_name;
$size = ceil($handle->file_src_size / 1024);
## Sending photo details back to the uploader.
$date = date("c", $time);
## Reducing the length of real name if it exceeds 50 characters.
if(strlen($real_name) > 50) {
$real_name = substr($real_name, 0, 50).'..';
}
echo 'success,'.$real_name.','.$date.','.$folder.','.$actual_name;
} else {
echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>There was an error uploading the photo.</div>';
}
} else {
echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>The photo is bigger than the allowed upload size of <strong>10MB</strong>.</div>';
}
} else {
echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>You are trying to upload a photo with smaller dimensions.</div>';
}
} else {
echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>Only photo uploads are allowed.</div>';
}
} else {
echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>Only photo uploads are allowed.</div>';
}
} else {
echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>An upload error occured.</div>';
}
/*
@@ Return the json response to the script.
*/
$handle->Clean();
} else {
echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>An upload error occured.</div>';
}
希望本文所述对大家的PHP+jQuery程序设计有所帮助。
类似资料：
-
本文向大家介绍ajax上传图片到PHP并压缩图片显示的方法，包括了ajax上传图片到PHP并压缩图片显示的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了ajax上传图片到PHP并压缩图片显示的具体代码，供大家参考，具体内容如下 需求就是，上传图片并压缩图片页面效果如下图： HTML代码 CSS代码和引入的bootstrap JS代码 PHP代码 图片压缩类请下载源码 以上就是本
-
本文向大家介绍AJAX实现图片预览与上传及生成缩略图的方法，包括了AJAX实现图片预览与上传及生成缩略图的方法的使用技巧和注意事项，需要的朋友参考一下 要实现功能，上传图片时可以预览，因还有别的文字，所以并不只上传图片，实现与别的文字一起保存，当然上来先上传图片，然后把路径和别的文字一起写入数据库；同时为 图片生成缩略图，现只写上传图片方法，文字在ajax里直接传参数就可以了，若要上传多图，修改一
-
问题内容： 我有上传表格，允许用户上传多个文件。我决定，如果文件很大，则进度条会很好。下面是我的源代码。我是jQuery的新手，通常我只会使用php，但是我发现ajax更加用户友好。 图像上传正常，数组发送到ajax，但进度条不动。实际上，调用这两个函数的console.log都不会产生这种情况。有没有正确的方法来调用我的ajax请求中的函数，以使此进度条正常工作。 beforeSubmit：be
-
本文向大家介绍PHP+Ajax无刷新带进度条图片上传示例，包括了PHP+Ajax无刷新带进度条图片上传示例的使用技巧和注意事项，需要的朋友参考一下 项目需求：1.PHP+Ajax无刷新带进度条图片上传，2.带进度条。所需插件：jquery.js，jquery.form.js。 最近在做一个手机web项目，需要用到Ajax上传功图片能，项目要求PHP无刷新上传图片，并且要带进度条，下面就来讲一下我的
-
问题内容： Q.1我想将这种形式转换为ajax，但似乎我的ajax代码缺少某些内容。提交根本不做任何事情。 Q2。我还希望在选择文件时不等待提交时在更改时触发该函数。 这是JS。 和HTMl与php。 问题答案： 首先在ajax调用中包含成功和错误功能，然后检查它是否给您错误或什么？ 您的代码应该像这样
-
我想生成以下文件格式的缩略图（第一页）： PDF DOC/DOCX[MS OFFICE] PPT/PPTX[MS OFFICE]