当前位置: 动力学知识库 > 问答 > 编程问答 >

php - Blueimp File Upload Pass Variable

问题描述:

I have a product pictures folder

> product/['product-id']/ => Original Image Path

> product/['product-id']/thumbnail/

> product/['product-id']/small/

> product/['product-id']/medium/

> product/['product-id']/large/

I'm using Blueimp File Upload I have to pass variable while uploading i need productID for paths. If i use $_SESSION['productid'] everything is all right except uploading more than one product simultaneously.

I tried to use $_REQUEST['productid'] instead of $_SESSION['productid']. There is no problem during upload. But an error occured during loading uploaded images.

I need to pass variables for uploading and for loading. I'm done for uploading but i couldn't handle for loading.

Here is my fileupload/server/php/index.php file

 `$productid = intval($_REQUEST['productid']); //intval($_SESSION['productid']);

$dirPath = PRODUCT_IMAGE_ABSPATH;

$url = STATIC_HOST.PRODUCT_IMAGE_PATH;

$options = array (

'productid' => $productid, //This is custom option for productid

'accept_file_types' => '/(\.|\/)(gif|jpe?g|png)$/i',

'max_file_size' => 768000,

'max_width' => 1920,

'max_height' => 1920,

'min_width' => 600,

'min_height' => 600,

'upload_dir' => $dirPath.$productid.'/',

'upload_url' => $url.$productid.'/',

'image_versions' => array(

'thumbnail' => array(

'upload_dir' => $dirPath.$productid.'/thumbnail/',

'upload_url' => $url.$productid.'/thumbnail/',

'max_width' => 80,

'max_height' => 80

),

'small' => array(

'upload_dir' => $dirPath.$productid.'/small/',

'upload_url' => $url.$productid.'/small/',

'max_width' => 160,

'max_height' => 160

),

'medium' => array(

'upload_dir' => $dirPath.$productid.'/medium/',

'upload_url' => $url.$productid.'/medium/',

'max_width' => 300,

'max_height' => 300

),

'large' => array(

'upload_dir' => $dirPath.$productid.'/large/',

'upload_url' => $url.$productid.'/large/',

'max_width' => 600,

'max_height' => 600

)

)

);

$upload_handler = new UploadCustom($options);`

And here is my fileupload/index.php file

 <?php

include_once '../../autoload.php';

//session_start();

ob_start();

$U = new User();

$C = new Cart();

$productObj = new Product();

$categoryObj = new Category();

if($U->userRole('employee')){

if (isset($_GET['pid'])){

$type = 'uploadFile';

$site_title = _('Upload');

$productid = intval($_GET['pid']); //$_SESSION['productid'] =

?>

<!DOCTYPE html>

<html lang="tr">

<head>

<?php include(HEAD_META); ?>

<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">

<link rel="stylesheet" href="<?php echo HOST; ?>/admin/fileupload/css/jquery.fileupload-ui.css">

<noscript><link rel="stylesheet" href="css/jquery.fileupload-ui-noscript.css"></noscript>

<style type="text/css">

#dropzone {

background: palegreen;

width: 150px;

height: 50px;

line-height: 50px;

text-align: center;

font-weight: bold;

}

#dropzone.in {

width: 600px;

height: 200px;

line-height: 200px;

font-size: larger;

}

#dropzone.hover {

background: lawngreen;

}

#dropzone.fade {

-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

opacity: 1;

}

</style>

</head>

<body>

<?php //include(BODYTAGS); ?>

<div id="container">

<?php include(NAVBAR); ?>

<?php include(HEADER); ?>

<div class="col-md-12">

<?php

if (isset($_POST['choose_category_button'])){

echo $productid."-".$_POST['category_id'];

$categoryUpdateResult = ($categoryObj->updateCategory($_POST['category_id'], $productid)) ? "Kategori başarı ile güncellendi" : "Kategori Güncellemesi Başarısız";

}

?>

<?php $product = $productObj->get_product($productid); ?>

<?php $productObj->BreadCrumb(array(

array('Ürün Listesi','admin/list.php'),

array('Ürün: '.$product['stock_code'].' - '.$product['product'])

));

$categoryList = $categoryObj->deepestCategories();

?>

<div class="container col-md-12">

<p style="color:#333; font-size:28px; font-weight:bold; padding:10px;"><a target="_blank" href="<?php echo BASE_PATH.$productObj->get_permalink($productid, $product['product']); ?>"><?php echo $product['stock_code']." - ".$product['product']; ?></a></p>

<div class="clearfix"></div>

<form action="server/php/index.php?pid=<?php echo $productid; ?>" method="POST" role="form">

<div class="col-md-4">

<div class="row">

<div class="input-group">

<select id="categorylist" name="category_id" class="form-control">

<option value="0"> ---- (Sınıflandırılmamış) ---- </option>

<?php foreach($categoryList as $category) { ?>

<option value="<?php echo $category['id']; ?>" <?php echo ($product['category_id'] == $category['id']) ? 'selected = "selected"' : ''; ?>><?php echo "(ID: ".$category['id'].") ".$category['category']; ?></option>

<?php } ?>

</select>

<span class="input-group-btn">

<button id="choose_category_button" name="choose_category_button" disabled = "disabled" type="submit" class="btn btn-default">Kategori Seç</button>

</span>

</div>

</div>

</div>

</form>

<script>

$('#categorylist').change(function(){

$('#choose_category_button').removeAttr('disabled');

});

</script>

<div class="clearfix"></div>

<div class="vertical-space5"></div>

<?php

if(isset($categoryUpdateResult)){

echo $categoryUpdateResult;

}

?>

<div class="pull-left">

<?php

$prev = $productObj->hasProduct($productid, 'prev');

if ($prev === FALSE){//Önceki Ürün Yoksa... ?>

<button class="btn btn-default" disabled="disabled"><span class="glyphicon glyphicon-arrow-left"></span> Önceki</button>

<?php } else { //Önceki Ürün Varsa... ?>

<a href="index.php?pid=<?php echo $prev['id']; ?>" title="<?php echo $prev['stock_code']." - ".$prev['product']; ?>" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span> Önceki</a>

<?php }

?>

</div>

<div class="pull-right">

<a href="../sort.php?pid=<?php echo $productid; ?>" class="btn btn-default"><span class="glyphicon glyphicon-camera"></span> Resimleri Düzenle</a>

<?php

$next = $productObj->hasProduct($productid, 'next');

if ($next === FALSE){//Önceki Ürün Yoksa... ?>

<button class="btn btn-default" disabled="disabled">Sonraki <span class="glyphicon glyphicon-arrow-right"></span></button>

<?php } else { //Önceki Ürün Varsa... ?>

<a href="index.php?pid=<?php echo $next['id']; ?>" title="<?php echo $next['stock_code']." - ".$next['product']; ?>" class="btn btn-default">Sonraki <span class="glyphicon glyphicon-arrow-right"></span></a>

<?php }

?>

</div>

<?php if (is_null($product['category_id'])){ ?>

<div style="min-height:300px; padding-top:80px;">

<h4>Ürün kategorisi seçilmediği için resim yükleme işlemi yapamazsınız. Lütfen ürün için uygun bir kategori seçin.</h4>

</div>

<?php } else { ?>

<!-- The file upload form used as target for the file upload widget -->

<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">

<!-- Redirect browsers with JavaScript disabled to the origin page -->

<noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>

<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->

<div class="row fileupload-buttonbar">

<div class="col-md-7">

<!-- The fileinput-button span is used to style the file input field as button -->

<span class="btn btn-success fileinput-button">

<i class="glyphicon glyphicon-plus"></i>

<span>Resim Ekle...</span>

<input type="file" name="files[]" multiple>

</span>

<button type="submit" class="btn btn-primary start">

<i class="glyphicon glyphicon-upload"></i>

<span>Yüklemeye Başla</span>

</button>

<button type="reset" class="btn btn-warning cancel">

<i class="glyphicon glyphicon-ban-circle"></i>

<span>İptal</span>

</button>

<button type="button" class="btn btn-danger delete">

<i class="glyphicon glyphicon-trash"></i>

<span>Sil</span>

</button>

<input type="checkbox" class="toggle">

<!-- The loading indicator is shown during file processing -->

<span class="fileupload-loading"></span>

</div>

<!-- The global progress information -->

<div class="col-md-5 fileupload-progress fade">

<!-- The global progress bar -->

<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">

<div class="progress-bar progress-bar-success" style="width:0%;"></div>

</div>

<!-- The extended global progress information -->

<div class="progress-extended">&nbsp;</div>

</div>

</div>

<!-- The table listing the files available for upload/download -->

<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

</form>

<div id="dropzone" class="fade well">Drop files here</div>

<script type="text/javascript">

$(document).bind('dragover', function (e) {

var dropZone = $('#dropzone'),

timeout = window.dropZoneTimeout;

if (!timeout) {

dropZone.addClass('in');

} else {

clearTimeout(timeout);

}

var found = false,

node = e.target;

do {

if (node === dropZone[0]) {

found = true;

break;

}

node = node.parentNode;

} while (node != null);

if (found) {

dropZone.addClass('hover');

} else {

dropZone.removeClass('hover');

}

window.dropZoneTimeout = setTimeout(function () {

window.dropZoneTimeout = null;

dropZone.removeClass('in hover');

}, 1000);

});

</script>

<?php } ?>

</div>

<!-- The blueimp Gallery widget -->

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">

<div class="slides"></div>

<h3 class="title"></h3>

<a class="prev">‹</a>

<a class="next">›</a>

<a class="close">×</a>

<a class="play-pause"></a>

<ol class="indicator"></ol>

</div>

<!-- The template to display files available for upload -->

<script id="template-upload" type="text/x-tmpl">

{% for (var i=0, file; file=o.files[i]; i++) { %}

<tr class="template-upload fade">

<td>

<span class="preview"></span>

</td>

<td>

<p class="name">{%=file.name%}</p>

{% if (file.error) { %}

<div><span class="label label-danger">Error</span> {%=file.error%}</div>

{% } %}

</td>

<td>

<p class="size">{%=o.formatFileSize(file.size)%}</p>

{% if (!o.files.error) { %}

<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>

{% } %}

</td>

<td>

{% if (!o.files.error && !i && !o.options.autoUpload) { %}

<button class="btn btn-primary start">

<i class="glyphicon glyphicon-upload"></i>

<span>Start</span>

</button>

{% } %}

{% if (!i) { %}

<button class="btn btn-warning cancel">

<i class="glyphicon glyphicon-ban-circle"></i>

<span>Cancel</span>

</button>

{% } %}

</td>

</tr>

{% } %}

</script>

<!-- The template to display files available for download -->

<script id="template-download" type="text/x-tmpl">

{% for (var i=0, file; file=o.files[i]; i++) { %}

<tr class="template-download fade">

<td>

<span class="preview">

{% if (file.thumbnailUrl) { %}

<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>

{% } %}

</span>

</td>

<td>

<p class="name">

{% if (file.url) { %}

<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>

{% } else { %}

<span>{%=file.name%}</span>

{% } %}

</p>

{% if (file.error) { %}

<div><span class="label label-danger">Error</span> {%=file.error%}</div>

{% } %}

</td>

<td>

<span class="size">{%=o.formatFileSize(file.size)%}</span>

</td>

<td>

{% if (file.deleteUrl) { %}

<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>

<i class="glyphicon glyphicon-trash"></i>

<span>Delete</span>

</button>

<input type="checkbox" name="delete" value="1" class="toggle">

{% } else { %}

<button class="btn btn-warning cancel">

<i class="glyphicon glyphicon-ban-circle"></i>

<span>Cancel</span>

</button>

{% } %}

</td>

</tr>

{% } %}

</script>

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->

<script src="js/vendor/jquery.ui.widget.js"></script>

<!-- The Templates plugin is included to render the upload/download listings -->

<script src="js/tmpl.min.js"></script>

<!-- http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js -->

<!-- The Load Image plugin is included for the preview images and image resizing functionality -->

<script src="js/load-image.all.min.js"></script>

<!-- http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js -->

<!-- The Canvas to Blob plugin is included for image resizing functionality -->

<script src="js/canvas-to-blob.min.js"></script>

<!-- http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js -->

<!-- blueimp Gallery script -->

<script src="js/jquery.blueimp-gallery.min.js"></script>

<!-- http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js -->

<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->

<script src="js/jquery.iframe-transport.js"></script>

<!-- The basic File Upload plugin -->

<script src="js/jquery.fileupload.js"></script>

<!-- The File Upload processing plugin -->

<script src="js/jquery.fileupload-process.js"></script>

<!-- The File Upload image preview & resize plugin -->

<script src="js/jquery.fileupload-image.js"></script>

<!-- The File Upload audio preview plugin -->

<script src="js/jquery.fileupload-audio.js"></script>

<!-- The File Upload video preview plugin -->

<script src="js/jquery.fileupload-video.js"></script>

<!-- The File Upload validation plugin -->

<script src="js/jquery.fileupload-validate.js"></script>

<!-- The File Upload user interface plugin -->

<script src="js/jquery.fileupload-ui.js"></script>

<!-- The main application script -->

<script src="js/main.js"></script>

<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->

<!--[if (gte IE 8)&(lt IE 10)]>

<script src="js/cors/jquery.xdr-transport.js"></script>

<![endif]-->

<script type="text/javascript">

$('#fileupload').fileupload({ autoUpload: true, dropZone: $('#dropzone'), formData: {

productid: '<?php echo $productid; ?>'

}});

</script>

</div>

<?php include(FOOTER); ?>

</div>

</body>

</html>

<?php } ?>

<?php } else {

$U->redirectLogin();

} ?>

<?php ob_end_flush(); ?>

分享给朋友:
您可能感兴趣的文章:
随机阅读: