Multiple upload in Uploadify with rename - how to send scriptData?
https://stackoverflow.com/questions/8604715
-
25-03-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
At first, sorry for my bad english.
I am using Uploadify with image cropper to upload and choose your own thumb, but I need to do a multi upload, not single. Now I´m trying to send before each upload - onSelect scriptData to server, but it send only one name, or rewriting it somewhere:( I tried change name of parameter, reset scriptData but with no effect. Problem is, that name of file must generate Javascript, which will send it to server (second option is do it by ajax), because Javascript then show the thumb.
EDIT Link is not working, if you want last version, contact jaroslav.streit@gmail.com
Test is running here http://nabytek-santy.cz/test/
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test uploadcropperu</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="index,follow">
<meta name="author" content="HS Computers - www.hscomputers.cz">
<link rel="stylesheet" media="screen" type="text/css" href="uploadcropper/uploadcropper.css">
<link href='uploadcropper/uploadify/uploadify.css' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='uploadcropper/uploadify/jquery-1.4.2.min.js'>
</script>
<script type='text/javascript' src='uploadcropper/uploadify/swfobject.js'></script>
<script type='text/javascript' src='uploadcropper/uploadify/jquery.uploadify.js'></script>
<script type='text/javascript'>
<!--
sdiak = "áäčďéěíĺľňóô öŕšťúů üýřžÁÄČĎÉĚÍĹĽŇÓÔ ÖŔŠŤÚŮ ÜÝŘŽ";
bdiak = "aacdeeillnoo orstuu uyrzAACDEEILLNOO ORSTUU UYRZ";
function bezdiak(text) {
tx = Math.floor(Math.random() * 1111111) + " ";
txt = text;
for (p = 0; p < txt.length; p++) {
if (sdiak.indexOf(txt.charAt(p)) != -1) {
tx += bdiak.charAt(sdiak.indexOf(txt.charAt(p)));
} else tx += txt.charAt(p);
}
tx = tx.replace(/ /g, "_");
return tx;
}
nazev = "";
function generuj_nazev(i) {
neco = bezdiak(i);
set_nazev(neco);
return neco;
}
function set_nazev(i) {
nazev = i;
}
function vypis_nazev() {
return nazev;
}
function smazat(i) {
if (confirm("Opravdu odstranit?")) {
var d = document.getElementById('url');
var olddiv = document.getElementById("radek" + i);
oFormObject = document.forms['form'];
d.removeChild(olddiv);
oFormObject = document.forms['form'];
pocet_obrazku = oFormObject.elements["pocet_obrazku"].value;
i = parseInt(pocet_obrazku);
oFormObject.elements["pocet_obrazku"].value = --i;
}
}
function uprava_nahledu(nazev, id) {
var img = new Image();
img.src = "temp/neorezane_" + nazev;
var width = img.width;
var height = img.height;
windowWidth = width + 100;
windowHeight = height + 100;
var centerWidth = (window.screen.width - windowWidth) / 2;
var centerHeight = (window.screen.height - windowHeight) / 2;
window.open("uploadcropper/uprava_nahledu.php?nazev=" + nazev + "&width=" + width + "& height=" + height + "&id=" + id, "blank", "scrollbars=yes,toolbar=no,width=" + windowWidth + "px,height=" + windowHeight + "px,left=" + centerWidth + "px,top=" + centerWidth + "px");
}
function zmenObrazek(nazev, id) {
document.getElementById('neco' + id).innerHTML = "";
var img = $("<img />").attr('src', 'temp/smaller_' + nazev)
.load(function() {
$("#neco" + id).append(img);
});
}
id_obrazku = 0;
jQuery(document).ready(function() {
$('#file_upload').uploadify({
'uploader': 'uploadcropper/uploadify/uploadify.swf',
'script': 'uploadcropper/uploadify/uploadify.php',
'cancelImg': 'uploadcropper/uploadify/cancel.png',
'folder': 'temp',
'multi': true,
'buttonText': 'Vybrat fotografie',
'fileExt': '*.jpg;*.jpeg;*.JPG;*.JPEG;',
'fileDesc': 'Fotografie, Obrázky, pouze JPG, JPEG',
'auto': true,
'method': 'POST',
'onSelect': function(event, ID, fileObj) {
$('#file_upload').uploadifySettings("scriptData", {
"nazev": generuj_nazev(fileObj.name)
});
},
'onComplete': function(event, ID, fileObj, response, data) {
nazev_obrazku = vypis_nazev();
//Validace extension
var fileName = fileObj.name;
var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1);
//var validExtensions = new Array('jpg','jpeg');
if (fileNameExt == "jpg" || fileNameExt == "jpeg" || fileNameExt == "JPEG" || fileNameExt == "JPG") {
oFormObject = document.forms['form'];
pocet_obrazku = oFormObject.elements["pocet_obrazku"].value;
i = id_obrazku;
++id_obrazku;
oFormObject.elements["pocet_obrazku"].value = ++pocet_obrazku;
fce = "uprava_nahledu('" + nazev_obrazku + "','" + i + "')";
var html = '';
html = '<div id="radek' + i + '" class="radek"><span class="tabulka_smazat"><img src="uploadcropper/delete.gif" alt="smazat" border="0" onclick="smazat(' + i + ');"></span><span class="ramecek"><div id="neco' + i + '"><img src="uploadcropper/edit.gif" alt="Upravit náhled" border="0" onclick="' + fce + '" class="button_edit"><img src="temp/small_' + nazev_obrazku + '" class="imgsmall" id="nahled' + i + '" title="Náhled obrázku" ></div></span><span class="hidden"><img src="temp/neorezane_' + nazev_obrazku + '" id="' + nazev_obrazku + '">Popis:<input name="popis' + i + '" id="popis' + i + '" type="text"></span><input id="file' + i + '" name="file' + i + '" type="text" value="' + nazev_obrazku + '">' + nazev_obrazku + ', cislo: ' + i + '</div>'
document.getElementById('url').innerHTML += html;
} else {
window.alert("Nesprávný typ souboru!");
}
}
});
});
</script>
</head>
<body>
<form method="POST" action="?obsah=ulozit&naz=reference&id=" id="form">
<fieldset>
<legend>Nahrávání a úprava obrázků</legend>
<div class="admin_obrazky" class="admin_obrazky"> <span class="">Po vybrání obrázku se nahraje a zobrazí se automaticky ořezaný náhled, pokud vám ořez nevyhovuje, kliknutím na <img src="uploadcropper/edit.gif" class="ikona_text"> jej můžete ořezat. Ořez můžete provést jen jednou.</span>
<input id="file_upload" name="file_upload" type="file" />
<input id="pocet_obrazku" name="pocet_obrazku" type="text" value="0" />
<div id="url"></div>
</div>
</fieldset>
<input type="submit" value="Vložit novou referenci" onclick="return checkform();">
</p>
<script language="JavaScript" type="text/javascript">
//<!--
function checkform() {
oFormObject = document.forms['form'];
if (oFormObject.elements["nadpis"].value == "") {
window.alert("Vyplňte prosím nadpis.");
return false;
} else {
return true;
}
}
//-->
</script>
</form>
</body>
</html>
uploadify.php:
<?php
include("resize.php");
if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
$nazev_souboru = $_POST["nazev"];
$targetFile_neorezane = str_replace('//','/',$targetPath) ."neorezane_".$nazev_souboru;
$targetFile_small = str_replace('//','/',$targetPath) . "small_" . $nazev_souboru;
$targetFile = str_replace('//','/',$targetPath) . $nazev_souboru;
$fileTypes = str_replace('*.','',$_REQUEST['fileext']);
$fileTypes = str_replace(';','|',$fileTypes);
$typesArray = split('\|',$fileTypes);
$fileParts = pathinfo($_FILES['Filedata']['name']);
if (in_array($fileParts['extension'],$typesArray)) {
// ulozit do tempu a zmensit pro nahled
Resizer_thumb($tempFile,$targetFile_small,166,124);
// zjisti, zda je obrazek na vysku nebo na sirku
list($OrigWidth, $OrigHeight) = getimagesize($tempFile);
if($OrigWidth/$OrigHeight<=1.338){
// na vysku
Resizer($tempFile,$targetFile_neorezane,166,0);
}
else{
// na sirku
Resizer($tempFile,$targetFile_neorezane,0,124);
}
Resizer($tempFile,$targetFile,640,640);
} else {
echo 'Nevhodný typ souboru.';
}
chmod($targetFile, 0666);
}
?>
Solution
I solved it! I generate random string in onSelect and send by scriptData. Then all files (I assume they have different file names) have this code before filename. If somebody want code, send me a message.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
