我创建了一个jQuery脚本来进行一些表单验证(即注册用户,登录用户,创建项目/专辑等)。它在PHP中使用$_POST
函数工作得很好。我正在尝试创建一个上传表单,以便立即将文件上传到特定的相册,而jQuery没有响应。这是代码:
表格:
<?PHP
include 'init.php';
if (!isset ($_SESSION['user_id'])){
header('Location: index.php');
exit();
}
if (!logged_in()){
header('Location: ../index.php');
exit();
}
$shots = get_shots();
?>
<head>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery_1_6_2.js" type="text/javascript"></script>
<script src="js/jfunc.js" type="text/javascript"></script>
</head>
<div class="grid_1_head"> Upload File <span class="right_shots"><a id="close-panel" href="#"class="create_new_shot">Close this window</a></span></div>
<div class="hover_1_body">
<p> Select the file you would like to upload then click the Upload File Button. </p>
<div class="project_form_text">
<div class="hover_1_error">
<div class="message_error"></div>
<div class="project_create_success"></div>
</div>
<div class="form_left">
<form id="upload_file" action="widgets/upload_file_process.php" method="post" enctype="multipart/form-data">
<p>
<label for="selected_file">Choose a File:</label>
<input id="selected_file" name="selected_file" type="file" class="field_boarder" value="" /> <br />
Choose a shot:
<select name="shot_id" class="select_style">
<?php
foreach ($shots as $shot){
echo '<option value="', $shot['shot_id'], '">', $shot['shot_name'], ' </option>';
}
?>
</select>
</p>
<div class="login_button_container">
<input name="upload_file" type="submit" class="login_button" value="Upload File"/>
</div>
</form>
</div>
</div>
这是处理表格的PHP:
<?php
include '../init.php';
if (!logged_in()){
header('Location: ../index.php');
exit();
}
if (isset($_FILES['selected_file'], $_POST['shot_id'])){
$file_name = $_FILES['selected_file']['name'];
$file_size = $_FILES['selected_file']['size'];
$file_temp = $_FILES['selected_file']['tmp_name'];
$allowed_ext = array('mov','r3d','avi','mp4','wmv','ogg','webm', //Video Files
'mp3','aif','aiff','wav','ac3', //Audio Files
'gif','jpg','jpeg','png','pic','pict','psd','bmp','dpx','raw','jpf','pcx','tga', // Still bitmap files and Sequences
'tif','tiff','hdr','exr', 'picio','rla','rpf','sgi','iff','cin','als',
'ai','svg','svgz','eps', // Still Vector files
'fcp','color','edl','mxf','aaf','omf','xml', // Interchange formats
'pdf','xls','doc','txt','ppt','xlsx','docx','rtf'); // Documents
$file_ext = strtolower(end(explode('.', $file_name)));
$shot_id = $_POST['shot_id'];
$errors = array();
if (empty($file_name) || empty($shot_id)){
$file_exists_check = 'invalid';
}else {
$file_exists_check = 'valid';
}
if (in_array($file_ext, $allowed_ext) === false){
$file_type_check = 'invalid';
}else {
$file_type_check = 'valid';
}
if ($file_size > 2097152000) {
$file_size_check = 'invalid';
}else {
$file_size_check = 'valid';
}
if (shot_check($shot_id) === true){
$shot_exists_check = 'invalid';
}else {
$shot_exists_check = 'valid';
}
$errors["file_exists_check"] = $file_exists_check;
$errors["file_type_check"] = $file_type_check;
$errors["file_size_check"] = $file_size_check;
$errors["shot_exists_check"] = $shot_exists_check;
echo json_encode($errors);
}
?>
这是需要对问题用户进行警告并完成表格的公务功能:
// UPLOAD FILE VALIDATION
$(function(){
$("#upload_file").submit(function(e){
// e.preventDefault();
$.post("widgets/upload_file_process.php", $("#upload_file").serialize(),
function(data){
if(data.file_exists_check == 'invalid'){
$('div.message_error').hide();
$('div.project_create_success').hide();
$('div.message_error').fadeIn();
$('div.message_error').html("<div>You need to select a file.</div>");
} else if (data.file_type_check == 'invalid'){
$('div.message_error').hide();
$('div.project_create_success').hide();
$('div.message_error').fadeIn();
$('div.message_error').html("<div>File type not supported</div>");
} else if (data.file_size_check == 'invalid'){
$('div.message_error').hide();
$('div.project_create_success').hide();
$('div.message_error').fadeIn();
$('div.message_error').html("<div>File must be less than 2GB</div>");
}else if (data.shot_exists_check == 'invalid'){
$('div.message_error').hide();
$('div.project_create_success').hide();
$('div.message_error').fadeIn();
$('div.message_error').html("<div>That shot does not exist</div>");
}else {
$('div.message_error').hide();
$('div.project_create_success').fadeIn();
$('div.project_create_success').html("<div>File Uploading </div>");
$(function(){
$('#lightbox_content').delay(300).fadeOut(300 , function(){
$(this).remove();
});
$('#lightbox_bg').delay(300).fadeOut(300, function(){
$(this).remove();
window.location.replace("producer.php");
});
});
return false;
}
}, "json");
});
});
这几乎与我用于注册工作正常的用户的功能完全相同。唯一新的(对我来说)是使用$_FILES
来获取文件信息。使用jQuery有问题吗?
提前谢谢。
答案 0 :(得分:1)
您无法使用xmlhttprequest上传文件 要使用框架/ iframe(我喜欢和谷歌)/ Flash / Java,如果你想做同步
答案 1 :(得分:0)
使用AJAX上传文件是一件复杂的事情。您可能会发现这些信息:$(form).serialize() Workaround for File Fields。它建议使用jQuery Form Plugin。
这是你可能得到的最好的。对不起,我无能为力。
祝你好运。
答案 2 :(得分:0)
为什么不尝试使用jquery ajax,它更简单
function uploadDocument() {
var formArray = new FormData($('#upload_file')[0]);
$.ajax({
url: "<?php echo Router::url('/uploadDocument'); ?>",
data: formArray,
type: "POST",
dataType: "json",
success: function(data){
//do something upon success
}
});
}
$('#upload_file').live('submit',function(){
var file = $('#selected_file')[0].files[0];
//run validation
uploadDocument();
return false;
})
你的uploadDocument.php中的,你可以只是print_r($ _ FILES); 我没有尝试这个,但理论上它应该有用。