0
jqueryを使用して、複数の画像アップロードを複数のテキストボックス機能で作成したいと考えています。しかし、問題は、データベースへのテキストエリアの値を渡す方法です。画像をアップロードすることはできますが、説明はデータベースに渡されませんjqueryを使用して複数の画像アップロードと複数のテキストボックスを作成するPHP
誰でもこの問題の解決に手伝ってもらえますか？
//main.php
<div class="modal fade" id="photo-modal" role="dialog">
<form method="post" action="upload-photo-action.php" autocomplte="off" enctype="multipart/form-data">
<input type="text" name="counter" id="counter" />
<div class="modal-dialog modal-dialog1">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Adding description</h4>
</div>
<div class="modal-body">
<input type="file" style="display:none" id="upload1" name="image_file_photo[]" multiple>
<button type="button" class="btn btn-upload" id="upload-image1" onclick="upload_photo();">Upload Photos From File</button>
<div> </div>
<div class="container-fluid" id="image" style="width:100%; max-height: 250px; overflow:auto;padding-left:0; padding-right:0;display:none;"></div>
<!-- end of container-fluid -->
</div><!-- end of modal-body-->
<div class="modal-footer" style="margin-top: 10px; text-align: center; display: none;" id="save_btn">
<input type="submit" name="upload_pho" id="upload_pho" class="btn btn-save" value="Save">
</div>
</div>
</div>
</div>
<script>
function upload_photo(){
$('#image').css("display", "block");
$('#save_btn').css("display", "block");
}
var count1=0;
function handleFileSelect1(evt) {
var $fileUpload1 = $("input#upload1[type='file']");
count1=count1+parseInt($fileUpload1.get(0).files.length);
if (parseInt($fileUpload1.get(0).files.length) > 11 || count1>10) {
alert("You can only upload a maximum of 10 files");
count1=count1-parseInt($fileUpload1.get(0).files.length);
evt.preventDefault();
evt.stopPropagation();
return false;
}
var files1 = evt.target.files;
for (var i = 0, f; f = files1[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function (theFile) {
counter1 = parseInt($fileUpload1.get(0).files.length);
return function (e) {
var span1 = document.createElement('span');
span1.innerHTML = ['<div style="width:24%; height: 60%; display: inline-block;"><img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '" style="max-width: 100%; max-height: 100%; border-radius: 0;" /><textarea rows="2" name="img_desc" id="img_desc" style="max-width: 100%;" placeholder="Add description"></textarea><span class="remove_img_preview1"><i class="fa fa-times-circle-o"></i></span></div><div style="display:inline-block;"> </div>'].join('');
document.getElementById('image').insertBefore(span1, null);
};
})(f);
reader.readAsDataURL(f);
}
}
</script>
///
////upload-photo-action.php
if(isset($_POST['upload_pho'])){
$errors= array();
foreach($_FILES['image_file_photo']['tmp_name'] as $key => $tmp_name){
$file_name = $key.$_FILES['image_file_photo']['name'][$key];
$file_size = $_FILES['image_file_photo']['size'][$key];
$file_tmp = $_FILES['image_file_photo']['tmp_name'][$key];
$file_type = $_FILES['image_file_photo']['type'][$key];
$image_desc = $_POST['img_desc'];
//if($file_size > 2097152){
//$errors[]='File size must be less than 2 MB';
//}
$query = mysql_query("INSERT INTO mt_image SET image_name = '".$file_name."',
image_size = '".$file_size."',
image_tmp = '".$file_tmp."',
image_desc = '".$image_desc."',
image_type = '".$file_type."'")or die(mysql_error());
$desired_dir = "img_upload";
if(empty($errors)==true){
if(is_dir($desired_dir)==false){
mkdir("$desired_dir", 0700); // Create directory if it does not exist
}
if(is_dir("$desired_dir/".$file_name)==false){
move_uploaded_file($file_tmp,"$desired_dir/".$file_name);
}else{ // rename the file if another one exist
$new_dir="$desired_dir/".$file_name.time();
rename($file_tmp,$new_dir) ;
}
mysql_query($query);
}else{
print_r($errors);
}
}
}
ありがとう、私はそれを試してみる –