好库网首页 | 我的好库
最近，我需要一个PHP使用SWF上传图像并进行裁剪的插件，但我没有找到，我试图结合
这些要求：SWF上传，裁剪，使用jQuery和PHP。
我找到了一些资料，关于SWF上传http://code.google.com/p/swfupload/和
jQuery图像裁剪http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/的内容,
另一个要求是限制上传一个文件，指定具体的图像类型和文件大小。 这些要求还需要一个PHP验证。
PHP中我们需要启用GD库。
好了，让我们看看如何实现吧：
1.添加jQuery和PHP裁剪过程所需的JS变量
<?php
require_once("config.php");
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="http://www.php-code.net" />
<title>SWF image upload & crop for php using jQuery</title>
<script type="text/javascript">
//<![CDATA[
var baseURL = "<?php echo BASE_URL;?>";
var jsThumbWidth = "100"; //this is the thumb width after
//cropping the original image using jQuery
var jsThumbHeight= "100"; //this is the thumb height after
//cropping the original image using jQuery
var jsCurrentLargeImageWidth;
var jsCurrentLargeImageHeight;
var varX1= 0;
var varY1= 0;
var varX2= 0;
var varY2= 0;
var varW = 0;
var varH = 0;
//]]>
</script>
config.php 文件包含配置设置，就像如下代码：
<?php
define("BASE_URL", "http://demo.php-code.net/swf_upload_and_crop");
?>
2. 包含所有必须的文件(JS和CSS):
<script type="text/javascript" src="<?php echo BASE_URL;?>
/swf_upload_and_crop/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?php echo BASE_URL;?>
/swf_upload_and_crop/js/functions.js"></script>
<script type="text/javascript" src="<?php echo BASE_URL;?>
/swf_upload_and_crop/js/upload/jquery.imgareaselect.js">
</script><!-- for jQuery cropping-->
<script type="text/javascript" src="<?php echo BASE_URL;?>
/swf_upload_and_crop/js/upload/purejstemplate_jquery.js">
</script> <!-- for loading display-->
<script type="text/javascript" src="<?php echo BASE_URL;?>
/swf_upload_and_crop/js/upload/swfupload.js">
</script><!-- for SWF upload-->
<script type="text/javascript" src="<?php echo BASE_URL;?>
/swf_upload_and_crop/js/upload/swfupload.handlers.js">
</script><!-- for SWF upload-->
<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL;?>
/swf_upload_and_crop/css/main.css" />
<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL;?>
/swf_upload_and_crop/css/upload/imgareaselect-default.css" />
<!-- for jQuery cropping-->
<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL;?>
/swf_upload_and_crop/css/upload/swfupload.css" /><!-- for SWF upload-->
3. 为SWF上传设定配置
<script type="text/javascript">
//<![CDATA[
var swfu;
window.onload = function() {
var settings = {
flash_url : baseURL + "/media/swfupload.swf",
upload_url: baseURL + "/functions.php?upload_user_image",
//post_params: {}, //if you need to send some parameters like,
//user id, PHP session id, etc
file_size_limit : "1 MB", //the uploaded file cannot be
//bigger than this limit
//debug: true, //if is set to true we can debug
prevent_swf_caching: true,
file_types : "*.jpg; *.jpeg; *.gif; *.png",
file_types_description: "Multimedia files",
//file_upload_limit : 1,
//file_queue_limit : 1,
file_post_name : 'uploaded_image',
custom_settings : {
messageTargetId : "message",
cancelButtonId : "btnCancel",
fileTemplateId : "tplFileQueue",
//Good
queueContainer : "uploadQueueContainer",
queue : {},
uploadSessionError : false
},
// Button settings
button_width: "61",
button_height: "22",
button_placeholder_id: "spanButtonPlaceHolder",
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_cursor: SWFUpload.CURSOR.HAND,
// The event handler functions are defined in handlers.js
swfupload_loaded_handler : swfUploadLoaded,
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete
//queue_complete_handler : queueComplete // Queue plugin event
};
swfu = new SWFUpload(settings);
};
//]]>
</script>
</head>
4. 创建SWF上传HTML模板
<body>
<h2>SWF image upload & crop for php using jQuery</h2>
<div id="tplFileQueue" style="display:none;">
<li id="#?=data.id?#" class="uploadOpen fileQueueItem">
<div class="items">
<strong>#?=data.name?#</strong>
<b>#?=data.size?#</b>
<b>#?=data.type?#</b>
<em id="message">#?=data.message?#</em>
<span class="status" >#?=data.status?#</span>
</div>
</li>
</div>
<div class="pageUpload" id="content">
<form action="#" id="uploadForm">
<div class="boxGray">
<div class="boxGrayMargin">
<div id="spanButtonPlaceHolder"></div>
<input id="btnUpload" onclick="alert('da'); return false;"
type="button" value="Browse..." style="width: 61px;
height: 22px; font-size: 8pt;"/>
<p>Allowed image size: 1 MB. </p>
<p>Allowed extensions: *.jpg; *.jpeg; *.gif; *.png.</p>
</div>
</div>
<div id="divLoadingContent" style="background-color: #FFFF66;
border-top: solid 4px #FF9966; border-bottom:
solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px;
display: none;">SWFUpload is loading. Please wait...</div>
<div id="divLongLoading" style="background-color: #FFFF66;
border-top: solid 4px #FF9966; border-bottom:
solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px;
display: none;">SWFUpload loading failed.
Please check to see if you have Flash activated and a
valid version of Flash Player.</div>
<div id="divAlternateContent" style="background-color: #FFFF66;
border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966;
margin: 10px 25px; padding: 10px 15px; display: none;">
Sorry. SWFUpload loading failed. You must install or
upgrade your Flash Player.
Please visit <a href="http://www.adobe.com/shockwave/
download/download.cgi?P1_Prod_Version=ShockwaveFlash">
Adobe website</a> to download Flash Player.
</div>
<ul id="uploadQueueContainer" class="upload"></ul>
<div class="boxGraySimple" id="footerStatus">
<div class="boxGraySimpleTop"><div>
</div></div><div class="boxGraySimpleMargin">
<div class="message"></div>
<div class="submit">
<p><span class="btn"><a href="javascript:;"
onclick="save_upload();return false;" id="add_file">
SAVE</a></span></p>
</div>
</div><div class="boxGraySimpleBottom"><div> </div></div></div>
</form>
<div id="thumbnail"></div>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#thumbnail').imgAreaSelect({show: true,
x1: varX1,
y1: varY1,
x2: varX2,
y2: varY2,
onSelectChange: showPreview});
});
//]]>
</script>
</body>
</html>
5. save_upload用于保存图片(位于js/upload/swfupload.handlers.js),如果一切正常应该是这样（if(fileContro == 1) 指示了允许上传多少文件）:
function save_upload(){
var uploadError = 0;
stats = swfu.getStats();
var cropDataString = '';
cropDataString += '&x1=' + $('#x1').val();
cropDataString += '&y1=' + $('#y1').val();
cropDataString += '&x2=' + $('#x2').val();
cropDataString += '&y2=' + $('#y2').val();
cropDataString += '&w=' + $('#w').val();
cropDataString += '&h=' + $('#h').val();
if(fileContor == 1){
$.ajax({
type: "post",
url: baseURL + "/functions.php?save_upload",
data: "file_name=" + fileName + cropDataString,
cache: false,
success: function(msg){
msgJSON = JSON.parse(msg);
if(msgJSON && typeof(msgJSON.response)
!= 'undefined' && msgJSON.response != 'ok'){
if(msgJSON.response == 'error'){
alert("The file type is
not within the allowed ones!");
}
else if(msgJSON.response ==
'error_save'){
alert("Image could not be saved!");
}
else if(msgJSON.response ==
'error_dates'){
alert("2 - No file added!");
}
if(stats.files_queued==0 &&
fileContor == 0){
uploadError=3;
}
if(uploadError==3){
alert('3 - No file added!');
}
}
else if(msgJSON && typeof(msgJSON.response)
!= 'undefined' && msgJSON.response == 'ok'){
//here comes your code for saving, I just put a redirect
location.href = baseURL +
"/upload_images/" + msgJSON.file_name;
}
fileContor--;
}
});
}
else{
alert("1 - No file added!");
}
}
免责声明：好库网所展示的信息由买卖双方自行提供，其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证，并不承担任何法律责任。