PrestaShop:在上传产品定制(或至少扩展名)时保留文件名和扩展名
PrestaShop: Keep the files name and extension when uploading a product customization (or at least the extension)
我正在使用 prestashop 并允许用户在将产品添加到他们的购物车时上传他们自己的文件。
我已经在后端和前端启用了它,我已经按照 this tutorial 进行设置。
这是处理 ajax 调用和文件上传的代码块。我希望它保留用户在上传时提供的文件的原始名称和扩展名。
这可能吗?
var files = new Array();
$('.customizationUploadLine').find('input[type="file"]').on('change', prepareUpload);
// Grab the files and set them to our variable
function prepareUpload(event)
{
files.push({'name' : event.target.name, 'file' :event.target.files[0]});
}
function previewFile(target, file) {
$('#uniform-'+target.attr('id')).before($('<img id="preview-'+target.attr('id')+'"/>'));
var preview = $('#preview-'+target.attr('id'));
var reader = new FileReader();
preview.attr('width', 64);
reader.onloadend = function () {
preview.attr('src', reader.result);
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.attr('src', "");
}
}
$('#uploadTrigger').click(function(e) {
if(files.length > 0)
{
$('<div class="myoverlay"></div>').css({
'position' : 'fixed',
'top' : 0,
'left' : 0,
'background' : 'black',
'background' : 'rgba(0,0,0,.5)',
'z-index' : 5999,
'width' : '100%',
'height' : '100%',
'cursor' : 'pointer'
}).appendTo('body');
$('<div class="uploadingfiles">Your files are being uploaded...<img src="'+baseUri+'themes/default-bootstrap/img/ajax-loader.gif"></div>')
.css({
'position' : 'absolute',
'top' : '30%',
'left' : '50%',
'width' : '300px',
'margin-left' : '-150px',
'text-align' : 'center',
'padding' : '10px',
'background' : 'white'
})
.appendTo('.myoverlay');
var data = new FormData();
$.each(files, function(key, obj)
{
data.append(obj.name, obj.file);
});
data.append('submitCustomizedDatas', 1);
data.append('ajax', 1);
$.ajax({
url: $('#customizationForm').attr('action'),
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false,
contentType: false,
success: function(data, textStatus, jqXHR)
{
if(typeof data.errors === 'undefined')
{
$.each(files, function(key, obj)
{
$('input[name="'+obj.name+'"]').addClass('filled');
previewFile($('input[name="'+obj.name+'"]'), obj.file);
});
$('.uploadingfiles').text('Upload Complete!');
}
else
{
$('.uploadingfiles').text('Error while uploading, please refresh the page and try again');
}
$('.myoverlay').click(function(){$(this).remove()});
},
error: function(jqXHR, textStatus, errorThrown)
{
$('.uploadingfiles').text('ERRORS: ' + errorThrown);
$('.myoverlay').click(function(){$(this).remove()});
}
});
} // end checking files length
else alert('Nothing to upload!');
});
目前文件上传到上传目录(太棒了!)但它有一个非常时髦的名称,没有与之相关的扩展名。我希望图片保留名称和扩展名,以便我可以将该信息传递到结帐屏幕并在那里显示他们上传的图片。
这是可能的,但我不建议这样做。但是,您必须覆盖 ProductController
,特别是 pictureUpload()
方法。
在 prestashop/overidde/controllers/front/
中创建一个名为 ProductController.php
的新文件,内容如下:
class ProductController extends ProductControllerCore {
protected function pictureUpload()
{
if (!$field_ids = $this->product->getCustomizationFieldIds()) {
return false;
}
$authorized_file_fields = array();
foreach ($field_ids as $field_id) {
if ($field_id['type'] == Product::CUSTOMIZE_FILE) {
$authorized_file_fields[(int)$field_id['id_customization_field']] = 'file'.(int)$field_id['id_customization_field'];
}
}
$indexes = array_flip($authorized_file_fields);
foreach ($_FILES as $field_name => $file) {
if (in_array($field_name, $authorized_file_fields) && isset($file['tmp_name']) && !empty($file['tmp_name'])) {
// $file_name = md5(uniqid(rand(), true));// Change this
$file_name = $file['name']; // In this
if ($error = ImageManager::validateUpload($file, (int)Configuration::get('PS_PRODUCT_PICTURE_MAX_SIZE'))) {
$this->errors[] = $error;
}
$product_picture_width = (int)Configuration::get('PS_PRODUCT_PICTURE_WIDTH');
$product_picture_height = (int)Configuration::get('PS_PRODUCT_PICTURE_HEIGHT');
$tmp_name = tempnam(_PS_TMP_IMG_DIR_, 'PS');
if ($error || (!$tmp_name || !move_uploaded_file($file['tmp_name'], $tmp_name))) {
return false;
}
/* Original file */
if (!ImageManager::resize($tmp_name, _PS_UPLOAD_DIR_.$file_name)) {
$this->errors[] = Tools::displayError('An error occurred during the image upload process.');
}
/* A smaller one */
elseif (!ImageManager::resize($tmp_name, _PS_UPLOAD_DIR_.$file_name.'_small', $product_picture_width, $product_picture_height)) {
$this->errors[] = Tools::displayError('An error occurred during the image upload process.');
} elseif (!chmod(_PS_UPLOAD_DIR_.$file_name, 0777) || !chmod(_PS_UPLOAD_DIR_.$file_name.'_small', 0777)) {
$this->errors[] = Tools::displayError('An error occurred during the image upload process.');
} else {
$this->context->cart->addPictureToProduct($this->product->id, $indexes[$field_name], Product::CUSTOMIZE_FILE, $file_name);
}
unlink($tmp_name);
}
}
return true;
}
}
现在上传的文件同名了。记得在prestashop/cache/
中删除class_index.php
如果您需要扩展,我想现在更容易做到:)
我正在使用 prestashop 并允许用户在将产品添加到他们的购物车时上传他们自己的文件。
我已经在后端和前端启用了它,我已经按照 this tutorial 进行设置。
这是处理 ajax 调用和文件上传的代码块。我希望它保留用户在上传时提供的文件的原始名称和扩展名。
这可能吗?
var files = new Array();
$('.customizationUploadLine').find('input[type="file"]').on('change', prepareUpload);
// Grab the files and set them to our variable
function prepareUpload(event)
{
files.push({'name' : event.target.name, 'file' :event.target.files[0]});
}
function previewFile(target, file) {
$('#uniform-'+target.attr('id')).before($('<img id="preview-'+target.attr('id')+'"/>'));
var preview = $('#preview-'+target.attr('id'));
var reader = new FileReader();
preview.attr('width', 64);
reader.onloadend = function () {
preview.attr('src', reader.result);
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.attr('src', "");
}
}
$('#uploadTrigger').click(function(e) {
if(files.length > 0)
{
$('<div class="myoverlay"></div>').css({
'position' : 'fixed',
'top' : 0,
'left' : 0,
'background' : 'black',
'background' : 'rgba(0,0,0,.5)',
'z-index' : 5999,
'width' : '100%',
'height' : '100%',
'cursor' : 'pointer'
}).appendTo('body');
$('<div class="uploadingfiles">Your files are being uploaded...<img src="'+baseUri+'themes/default-bootstrap/img/ajax-loader.gif"></div>')
.css({
'position' : 'absolute',
'top' : '30%',
'left' : '50%',
'width' : '300px',
'margin-left' : '-150px',
'text-align' : 'center',
'padding' : '10px',
'background' : 'white'
})
.appendTo('.myoverlay');
var data = new FormData();
$.each(files, function(key, obj)
{
data.append(obj.name, obj.file);
});
data.append('submitCustomizedDatas', 1);
data.append('ajax', 1);
$.ajax({
url: $('#customizationForm').attr('action'),
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false,
contentType: false,
success: function(data, textStatus, jqXHR)
{
if(typeof data.errors === 'undefined')
{
$.each(files, function(key, obj)
{
$('input[name="'+obj.name+'"]').addClass('filled');
previewFile($('input[name="'+obj.name+'"]'), obj.file);
});
$('.uploadingfiles').text('Upload Complete!');
}
else
{
$('.uploadingfiles').text('Error while uploading, please refresh the page and try again');
}
$('.myoverlay').click(function(){$(this).remove()});
},
error: function(jqXHR, textStatus, errorThrown)
{
$('.uploadingfiles').text('ERRORS: ' + errorThrown);
$('.myoverlay').click(function(){$(this).remove()});
}
});
} // end checking files length
else alert('Nothing to upload!');
});
目前文件上传到上传目录(太棒了!)但它有一个非常时髦的名称,没有与之相关的扩展名。我希望图片保留名称和扩展名,以便我可以将该信息传递到结帐屏幕并在那里显示他们上传的图片。
这是可能的,但我不建议这样做。但是,您必须覆盖 ProductController
,特别是 pictureUpload()
方法。
在 prestashop/overidde/controllers/front/
中创建一个名为 ProductController.php
的新文件,内容如下:
class ProductController extends ProductControllerCore {
protected function pictureUpload()
{
if (!$field_ids = $this->product->getCustomizationFieldIds()) {
return false;
}
$authorized_file_fields = array();
foreach ($field_ids as $field_id) {
if ($field_id['type'] == Product::CUSTOMIZE_FILE) {
$authorized_file_fields[(int)$field_id['id_customization_field']] = 'file'.(int)$field_id['id_customization_field'];
}
}
$indexes = array_flip($authorized_file_fields);
foreach ($_FILES as $field_name => $file) {
if (in_array($field_name, $authorized_file_fields) && isset($file['tmp_name']) && !empty($file['tmp_name'])) {
// $file_name = md5(uniqid(rand(), true));// Change this
$file_name = $file['name']; // In this
if ($error = ImageManager::validateUpload($file, (int)Configuration::get('PS_PRODUCT_PICTURE_MAX_SIZE'))) {
$this->errors[] = $error;
}
$product_picture_width = (int)Configuration::get('PS_PRODUCT_PICTURE_WIDTH');
$product_picture_height = (int)Configuration::get('PS_PRODUCT_PICTURE_HEIGHT');
$tmp_name = tempnam(_PS_TMP_IMG_DIR_, 'PS');
if ($error || (!$tmp_name || !move_uploaded_file($file['tmp_name'], $tmp_name))) {
return false;
}
/* Original file */
if (!ImageManager::resize($tmp_name, _PS_UPLOAD_DIR_.$file_name)) {
$this->errors[] = Tools::displayError('An error occurred during the image upload process.');
}
/* A smaller one */
elseif (!ImageManager::resize($tmp_name, _PS_UPLOAD_DIR_.$file_name.'_small', $product_picture_width, $product_picture_height)) {
$this->errors[] = Tools::displayError('An error occurred during the image upload process.');
} elseif (!chmod(_PS_UPLOAD_DIR_.$file_name, 0777) || !chmod(_PS_UPLOAD_DIR_.$file_name.'_small', 0777)) {
$this->errors[] = Tools::displayError('An error occurred during the image upload process.');
} else {
$this->context->cart->addPictureToProduct($this->product->id, $indexes[$field_name], Product::CUSTOMIZE_FILE, $file_name);
}
unlink($tmp_name);
}
}
return true;
}
}
现在上传的文件同名了。记得在prestashop/cache/
class_index.php
如果您需要扩展,我想现在更容易做到:)