0
먼저 프로그래밍에 익숙하지 않으므로 나와 함께하시기 바랍니다.jquery.filer로 다른 폼 데이터 제출하기 드래그 앤 드롭
여러 필드가있는 양식을 만들었습니다. 나는 파일 업로드 필드에 드래그 앤 드롭을 사용하고 나머지 폼 데이터도 제출하고 싶습니다.
나는 드래그 앤 드롭 스크립트에 jQuery.filer을 사용하고 있습니다.
문제는 파일 업로드시 나머지 데이터를 게시하는 방법을 알아낼 수 없다는 것입니다.
도움이되거나 도움이 될만한 점이 있으면 큰 도움이 될 것입니다. 다음은 메신저에 사용되는 파일입니다. 이것은 oscommerce 백엔드에 내장되어 있기 때문에 upload.php 파일에서 tep_db_query 함수를 볼 수 있습니다.
HTML
<script>
$(function() {
$("#email-box").draggable();
});
</script>
<div id="email-box" class="email-popup">
<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
<table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" align="center"><strong>Upload New Email</strong></td>
</tr>
</table>
<table width="650" border="0" cellspacing="15" cellpadding="10" align="center">
<form action="upload.php" id="EmailFormSubmit" name="EmailFormSubmit" enctype="multipart/form-data" method="post">
<tr>
<td width="100%" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div class="form_field_style wire_balance"><strong>Date Of Email</strong><br /> <input name="email_date" id="email_date" class="input_field_long" size="24" /></div>
<div class="form_field_style wire_balance"><strong>Contact Name</strong><br /> <input name="email_name" id="email_name" class="input_field_long" size="24" /></div>
<div class="form_field_style wire_balance"><strong>Email Address</strong><br /> <input name="email_address" id="email_address" class="input_field_long" size="24" /></div>
<div class="form_field_style wire_balance"><strong>Upload The Email</strong><br /><br /><input type="file" name="files[]" id="filer_input2"></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<input name="order_id" id="order_id" value="<?php echo $oID ?>" class="input_field" size="24" type="hidden">
</td>
</tr>
</form>
</table>
</div>
<div>
<div class="btn-sign">
<a href="#email-box" class="email-window"><span class="button_text_color">Add New Document</span></a>
</div>
</div>
<script>
$("#email_date").datetimepicker({
dateFormat:'yy-mm-dd',
controlType: 'select',
timeFormat: 'hh:mm tt'
});
</script>
upload.php로
<?php
// echo '<pre>'; print_r($_POST); print_r($_FILES);die;
require('includes/application_top.php');
include('class.uploader.php');
$uploader = new Uploader();
$data = $uploader->upload($_FILES['files'], array(
'limit' => 1, //Maximum Limit of files. {null, Number}
'maxSize' => 500, //Maximum Size of files {null, Number(in MB's)}
'extensions' => array('pdf','msg','docx','doc','xls','xlsx','txt','jpg','gif','png','tiff','bmp','eml'), //Whitelist for file extension. {null, Array(ex: array('jpg', 'png'))}
'required' => true, //Minimum one file is required for upload {Boolean}
'uploadDir' => 'uploads/emails/', //Upload directory {String}
'title' => array('name'), //New file name {null, String, Array} *please read documentation in README.md
'removeFiles' => true, //Enable file exclusion {Boolean(extra for jQuery.filer), String($_POST field name containing json data with file names)}
'perms' => null, //Uploaded file permisions {null, Number}
'onCheck' => null, //A callback function name to be called by checking a file for errors (must return an array) | ($file) | Callback
'onError' => null, //A callback function name to be called if an error occured (must return an array) | ($errors, $file) | Callback
'onSuccess' => null, //A callback function name to be called if all files were successfully uploaded | ($files, $metas) | Callback
'onUpload' => null, //A callback function name to be called if all files were successfully uploaded (must return an array) | ($file) | Callback
'onComplete' => null, //A callback function name to be called when upload is complete | ($file) | Callback
'onRemove' => 'onFilesRemoveCallback' //A callback function name to be called by removing files (must return an array) | ($removed_files) | Callback
));
if($data['isComplete']){
$files = $data['data'];
print_r($files);
}
if($data['hasErrors']){
$errors = $data['errors'];
print_r($errors);
}
$curr_aircraft = filter_var($_POST["curr_aircraft"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$email_name = filter_var($_POST["email_name"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$email_address = filter_var($_POST["email_address"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$email_date = date_create($_POST["email_date"]);
$email_copy = filter_var($_POST["email_copy"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$escrow_person = filter_var($_POST["escrow_person"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$order_id = filter_var($_POST["order_id"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
//$EmailDate=date_create("2013-03-15");
$dateTimeFormated = date_format($email_date,"Y/m/d H:i:s");
$insert_row = tep_db_query("INSERT INTO orders_email(date_added, email_address, email_name, email_copy, escrow_person, orders_id) VALUES ('".$dateTimeFormated."', '".$email_address."', '".$email_name."', '".$new_file_name."', '".$escrow_person."', '".$order_id."')");
function onFilesRemoveCallback($removed_files){
foreach($removed_files as $key=>$value){
$file = 'uploads/emails/' . $value;
if(file_exists($file)){
unlink($file);
}
}
return $removed_files;
}
?>
custom.js
$(document).ready(function() {
//Example 1
$('#filer_input').filer({
showThumbs: true
});
//Example 2
$("#filer_input2").filer({
limit: null,
maxSize: null,
extensions: null,
changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag&Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn blue">Browse Files</a></div></div>',
showThumbs: true,
theme: "dragdropbox",
templates: {
box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li>{{fi-progressBar}}</li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li><span class="jFiler-item-others">{{fi-icon}}</span></li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: false,
removeConfirmation: true,
_selectors: {
list: '.jFiler-items-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action'
}
},
dragDrop: {
dragEnter: null,
dragLeave: null,
drop: null,
},
uploadFile: {
url: "upload.php",
data: null,
type: 'POST',
enctype: 'multipart/form-data',
beforeSend: function(){},
success: function(data, el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
});
},
error: function(el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
});
},
statusCode: null,
onProgress: null,
onComplete: null
},
files: null,
addMore: false,
clipBoardPaste: true,
excludeName: null,
beforeRender: null,
afterRender: null,
beforeShow: null,
beforeSelect: null,
onSelect: null,
afterShow: null,
onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){
var file = file.name;
$.post('./php/remove_file.php', {file: file});
},
onEmpty: null,
options: null,
captions: {
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
});
});
질문을 편집하고 'form html'을 (를) 삽입 하시겠습니까? 이는 크게 도움이 될 것입니다. – Mathlight