codeigniter 图片上传和调整大小 - swfupload
我目前正在编写网站的一部分,允许用户上传图像,然后选择要裁剪的图像区域。我想要它,以便在用户不必提交表单的情况下上传该图像,所以我使用一个名为 swfupload 的工具,我已经设法上传图像,但是我无法让 swfupload 创建缩略图,甚至无法在我的文件中读取缩略图方法。
下面是我的代码,
PHP
public function upload()
{
$config['upload_path'] = "./media/uploads/users";
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '1000';
$config['max_width'] = '1024';
$config['max_height'] = '768';
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);
if ( ! $this->upload->do_upload('Filedata'))
{
$error = array('error' => $this->upload->display_errors());
//die(print_r($error));
}
else
{
$this->file = $this->upload->data();
echo $this->file['file_name'];
}
}
public function thumbnail()
{
//lets just try and get thumbnail() talking to swfupload
echo 1;
}
swfupload js
window.onload = function () {
swfu = new SWFUpload({
// Backend Settings
upload_url: "http://lcl.moovjob.com/index.php/admin/users/upload",
post_params: {"PHPSESSID": "<?php echo $this->session->userdata('session_id'); ?>" },
// File Upload Settings
file_size_limit : "5 MB", // 5MB
file_types : "*.jpg",
file_types_description : "JPG Images",
file_upload_limit : "0",
// Event Handler Settings - these functions as defined in Handlers.js
// The handlers are not part of SWFUpload but are part of my website and control how
// my website reacts to the SWFUpload events.
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
// Button Settings
button_image_url : "images/SmallSpyGlassWithTransperancy_17x18.png",
button_placeholder_id : "spanButtonPlaceholder",
button_width: 180,
button_height: 18,
button_text : '<span class="button">Select Images <span class="buttonSmall">(2 MB Max)</span></span>',
button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 0,
button_text_left_padding: 18,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_cursor: SWFUpload.CURSOR.HAND,
// Flash Settings
flash_url : "/media/flash/swfupload.swf",
custom_settings : {
upload_target : "divFileProgressContainer"
},
// Debug Settings
debug: true
});
};
我的处理程序 js,特别是上传成功方法,
function uploadSuccess(file, serverData) {
try {
var progress = new FileProgress(file, this.customSettings.upload_target);
if (serverData.substring(0, 7) === "FILEID:") {
addImage("http://local.test.com/index.php/admin/users/thumbnail");
progress.setStatus("Thumbnail Created.");
progress.toggleCancel(false);
} else {
addImage("images/error.gif");
progress.setStatus("Error.");
progress.toggleCancel(false);
alert(serverData);
}
} catch (ex) {
this.debug(ex);
}
}
我现在要做的就是上传图像,然后返回 1 所以我知道 swfupload 正在与我的控制器对话。我得到的只是上传成功或错误。
I am currently coding up a portion of site that allows the user to upload an image, and then choose an area of that image to crop. I am wanting it so that that image is uploaded without the user having to submit the form, so I using a tool called swfupload, I have managed to get the image uploading, however I cannot get swfupload to create a thumbnail or even read in my thumbnail method.
Below is my code,
PHP
public function upload()
{
$config['upload_path'] = "./media/uploads/users";
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '1000';
$config['max_width'] = '1024';
$config['max_height'] = '768';
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);
if ( ! $this->upload->do_upload('Filedata'))
{
$error = array('error' => $this->upload->display_errors());
//die(print_r($error));
}
else
{
$this->file = $this->upload->data();
echo $this->file['file_name'];
}
}
public function thumbnail()
{
//lets just try and get thumbnail() talking to swfupload
echo 1;
}
swfupload js
window.onload = function () {
swfu = new SWFUpload({
// Backend Settings
upload_url: "http://lcl.moovjob.com/index.php/admin/users/upload",
post_params: {"PHPSESSID": "<?php echo $this->session->userdata('session_id'); ?>" },
// File Upload Settings
file_size_limit : "5 MB", // 5MB
file_types : "*.jpg",
file_types_description : "JPG Images",
file_upload_limit : "0",
// Event Handler Settings - these functions as defined in Handlers.js
// The handlers are not part of SWFUpload but are part of my website and control how
// my website reacts to the SWFUpload events.
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
// Button Settings
button_image_url : "images/SmallSpyGlassWithTransperancy_17x18.png",
button_placeholder_id : "spanButtonPlaceholder",
button_width: 180,
button_height: 18,
button_text : '<span class="button">Select Images <span class="buttonSmall">(2 MB Max)</span></span>',
button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 0,
button_text_left_padding: 18,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_cursor: SWFUpload.CURSOR.HAND,
// Flash Settings
flash_url : "/media/flash/swfupload.swf",
custom_settings : {
upload_target : "divFileProgressContainer"
},
// Debug Settings
debug: true
});
};
My Handlers js, in particular the upload success method,
function uploadSuccess(file, serverData) {
try {
var progress = new FileProgress(file, this.customSettings.upload_target);
if (serverData.substring(0, 7) === "FILEID:") {
addImage("http://local.test.com/index.php/admin/users/thumbnail");
progress.setStatus("Thumbnail Created.");
progress.toggleCancel(false);
} else {
addImage("images/error.gif");
progress.setStatus("Error.");
progress.toggleCancel(false);
alert(serverData);
}
} catch (ex) {
this.debug(ex);
}
}
What am i doing for the time being all I want to is for the image to upload and then return 1 so I know swfupload is talking to my controller. All i get back is upload success or error.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您可以将 jquery file uplaoder 与 jquery 的图像区域选择插件一起使用。
这是图像区域选择插件的 URL:
http://odyniec.net/projects/imgareaselect/
You can use jquery file uplaoder with Image area select plugin of jquery.
This is the URL for image area select plugin:
http://odyniec.net/projects/imgareaselect/
我有点困惑为什么你不将缩略图方法添加到上传功能的末尾?据我所知,没有必要单独进行这些操作。
您已经在上传函数中检查了上传是否成功,因此在返回任何数据之前,将文件名/目录传递给缩略图函数,创建缩略图,然后以这种方式将成功或失败返回给您的 js。
I'm a little confused why you don't add the thumbnail method to the end of your upload function? There is no need to do these operations seperately as far as I can think of.
You already have a check for successful uploads in your upload function, so before it returns any data, pass the filename/dir to your thumbnail function, create the thumbnail and then return success or failure to your js that way.