Здравствуйте!
Имеется вот такой скрипт -
http://www.bewebdeveloper.com/tutori...php-and-jquery
Подключил его к сайту и все хорошо, но на другой странице нужно сделать загрузку не одной фотографии а трех.
К сожалению в javascript не разбираюсь и как сделать тоже самое для нескольких форм просто не понимаю, буду очень сильно благодарен за помощь, так как бьюсь над этим уже неделю!
скрипт который вызывает popup форму для загрузки
<script>
// the target size
var TARGET_W = 167;
var TARGET_H = 167;
// show loader while uploading photo
function submit_photo() {
// display the loading texte
$('#loading_progress').html('Загрузка вашей фотографии...');
}
// show_popup : show the popup
function show_popup(id) {
// show the popup
$('#'+id).show();
}
function show_popup2(id) {
// show the popup
$('#'+id).show();
}
function show_popup3(id) {
// show the popup
$('#'+id).show();
}
// close_popup : close the popup
function close_popup(id) {
// hide the popup
$('#'+id).hide();
}
// show_popup_crop : show the crop popup
function show_popup_crop(url) {
// change the photo source
$('#cropbox').attr('src', url);
// destroy the Jcrop object to create a new one
try {
jcrop_api.destroy();
} catch (e) {
// object not defined
}
// Initialize the Jcrop using the TARGET_W and TARGET_H that initialized before
$('#cropbox').Jcrop({
boxWidth: 800,
boxHeight: 600,
aspectRatio: TARGET_W / TARGET_H,
setSelect: [ 100, 100, TARGET_W, TARGET_H ],
onSelect: updateCoords
},function(){
jcrop_api = this;
});
// store the current uploaded photo url in a hidden input to use it later
$('#photo_url').val(url);
// hide and reset the upload popup
$('#popup_upload').hide();
$('#loading_progress').html('');
$('#photo').val('');
// show the crop popup
$('#popup_crop').show();
}
// crop_photo :
function crop_photo() {
var x_ = $('#x').val();
var y_ = $('#y').val();
var w_ = $('#w').val();
var h_ = $('#h').val();
var photo_url_ = $('#photo_url').val();
// hide thecrop popup
$('#popup_crop').hide();
// display the loading texte
$('#photo_container2').html('В работе...');
// crop photo with a php file using ajax call
$.ajax({
url: '../system/crop_photo.php',
type: 'POST',
data: {x:x_, y:y_, w:w_, h:h_, photo_url:photo_url_, targ_w:TARGET_W, targ_h:TARGET_H},
success:function(data){
// display the croped photo
$('#photo_container2').html(data);
}
});
}
// updateCoords : updates hidden input values after every crop selection
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
</script>
сама форма popup
<!-- The popup for upload new photo -->
<div id="popup_upload">
<div class="form_upload">
<span class="close" onclick="close_popup('popup_upload')">x</span>
<h2>Загрузка фотографии</h2>
<form action="../system/upload_photo.php" method="post" enctype="multipart/form-data" target="upload_frame" onsubmit="submit_photo()">
<input type="file" name="photo" id="photo" class="file_input">
<div id="loading_progress"></div>
<input type="submit" value="Загрузить" id="upload_btn">
</form>
<iframe name="upload_frame" class="upload_frame"></iframe>
</div>
</div>
<!-- The popup for crop the uploaded photo -->
<div id="popup_crop">
<div class="form_crop">
<span class="close" onclick="close_popup('popup_crop')">x</span>
<h2>Обрезка фотографии</h2>
<!-- This is the image we're attaching the crop to -->
<img id="cropbox" />
<!-- This is the form that our event handler fills -->
<form>
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="photo_url" name="photo_url" />
<input type="button" value="Обрезать фото" id="crop_btn" onclick="crop_photo()" />
</form>
</div>
</div>
ну и сама кнопка которая вызывает все это и заменяет стандартную картинку на загруженную
<span class="upload_btn" onclick="show_popup('popup_upload')">
<div class="pole_s_fotografiei-holder">
<div id="photo_container">
{photo1}
</div>
<div class="pri_navodke_na_pole_fotog fileinput type="text" -button">
<img class="plus_zagruzit_fotografiu" src="images/plus_zagruzit_fotografiu.png" alt="" width="42" height="40" />
</div>
</div>
</span>
Заранее спасибо!
P.S. Первый раз в жизни прошу помощи, если что-то не так сильно не ругайте) Правда, обыскал уже все что можно...
