我想通过ajax uplod多个文件,但我无法弄清楚如何在PHP中获取文件。谁能帮我?谢谢! 这是代码:
HTML:
<form enctype="multipart/form-data" method="POST">
<input type="file" id="file" multiple="multiple" name="file"/>
</form>
<div id="info"></div>
<div id="preview"></div>
JavaScript的:
$(document).ready(function(){
$("#file").change(function(){
var src=$("#file").val();
if(src!="")
{
formdata= new FormData(); // initialize formdata
var numfiles=this.files.length; // number of files
var i, file, progress, size;
for(i=0;i<numfiles;i++)
{
file = this.files[i];
size = this.files[i].size;
name = this.files[i].name;
if (!!file.type.match(/image.*/)) // Verify image file or not
{
if((Math.round(size))<=(1024*1024)) //Limited size 1 MB
{
var reader = new FileReader(); // initialize filereader
reader.readAsDataURL(file); // read image file to display before upload
$("#preview").show();
$('#preview').html("");
reader.onloadend = function(e){
var image = $('<img>').attr('src',e.target.result);
$(image).appendTo('#preview');
};
formdata.append("file[]", file); // adding file to formdata
console.log(formdata);
if(i==(numfiles-1))
{
$("#info").html("wait a moment to complete upload");
$.ajax({
url: _url + "?module=ProductManagement&action=multiplePhotoUpload",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function(res){
if(res!="0")
$("#info").html("Successfully Uploaded");
else
$("#info").html("Error in upload. Retry");
}
});
}
}
else
{
$("#info").html(name+"Size limit exceeded");
$("#preview").hide();
return;
}
}
else
{
$("#info").html(name+"Not image file");
$("#preview").hide();
return;
}
}
}
else
{
$("#info").html("Select an image file");
$("#preview").hide();
return;
}
return false;
});
});
在PHP中,我将$ _POST和$ _FILES作为一个空数组; 只有我做了file_get_contents(“php:// input”);我得到像
这样的东西-----------------------------89254151319921744961145854436
Content-Disposition: form-data; name="file[]"; filename="dasha.png"
Content-Type: image/png
PNG
���
IHDR��Ò��¾���gǺ¨��� pHYs��������tIMEÞ/§ýZ�� �IDATxÚìw`EÆgv¯¥B-4 ½Ò»tBU©)"¶+*"( E¥J7ôÞ;Ò¤W©¡&puwçûce³WR¸ èóûrw»³ï}fö
但我无法弄清楚如何从这里开始。
我正在使用Jquery 1.3.2也许这就是问题?
谢谢!
答案 0 :(得分:1)
您可以使用ajax form
上传插件
这就是我几天前发现并以这种方式实施的
参考:LINK
你的PHP代码可以是这样的
uploadimage.php
$response = array();
foreach ($_FILES as $file) {
/* Function for moving file to a location and get it's URL */
$response[] = FileUploader::uploadImage($file);
}
echo json_encode($response);
JS Code
options = {
beforeSend: function()
{
// Do some image loading
},
uploadProgress: function(event, position, total, percentComplete)
{
// Do some upload progresss
},
success: function()
{
// After Success
},
complete: function(response)
{
// Stop Loading
},
error: function()
{
}
};
$("#form").ajaxForm(options);
现在您可以调用任何AJAX并提交表单。
答案 1 :(得分:1)
对此答案感到抱歉,但我暂时无法添加评论。
我建议不要在javascript中检查文件类型,它很容易被绕过。我希望在允许将文件上传到服务器之前仔细检查PHP中的文件。
e.g。
这个答案取自另一个问题(uploaded file type check by PHP),给你一个想法:
https://stackoverflow.com/a/6755263/1720515
<?php
$allowedTypes = array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF);
$detectedType = exif_imagetype($_FILES['fupload']['tmp_name']);
$error = !in_array($detectedType, $allowedTypes);
?>
您可以阅读exif_imagetype()
函数 here 上的文档。
你能发布你的PHP代码了吗?如果我有什么要补充的话,我会更新我的答案。
<强>更新强>
注意:“多个”属性(multiple="multiple"
)不能与<input type='file' />
字段一起使用。必须在表单中使用多个<input type='file' />
字段,将每个字段命名为添加到末尾的[]
,以确保每个字段的内容都添加到数组中,并且不会覆盖表格发布时彼此相对。
e.g。
<form enctype="multipart/form-data" method="POST">
<input type="file" id="file_0" name="img_file[]" />
<input type="file" id="file_1" name="img_file[]" />
<input type="file" id="file_2" name="img_file[]" />
</form>
提交表单后,任何<input type='file' />
字段的内容都将添加到PHP $_FILES
数组中。然后可以使用$_FILES['img_file'][*parameter*][*i*]
引用文件,其中“ i ”是与文件输入关联的关键字,“参数”是多个与之关联的参数之一与$_FILES
数组的每个元素:
e.g。
$_FILES['img_file']['tmp_name'][0]
- 提交表单时,会在服务器上创建一个临时文件,该元素包含为该文件生成的“tmp_name”。$_FILES['img_file']['name'][0]
- 包含文件名,包括文件扩展名。$_FILES['img_file']['size'][0]
- 包含文件大小。 $_FILES['img_file']['tmp_name'][0]
可用于在文件永久上传到服务器之前预览文件(查看代码,这是您要包含的功能)
然后必须使用PHP的move_uploaded_file()函数将文件移动到服务器上的永久位置。
以下是一些示例代码:
<?php
if (!empty($_FILES)) {
foreach ($_FILES['img_file']['tmp_name'] as $file_key => $file_val) {
/*
...perform checks on file here
e.g. Check file size is within your desired limits,
Check file type is an image before proceeding, etc.
*/
$permanent_filename = $_FILES['img_file']['name'][$file_key];
if (@move_uploaded_file($file_val, 'upload_dir/' . $permanent_filename)) {
// Successful upload
} else {
// Catch any errors
}
}
}
?>
以下是一些可能有助于您理解的链接:
另外,有关保护文件上传漏洞的理论的一些额外阅读:
答案 2 :(得分:0)
您应该考虑以下代码
HTML
<input type="file" name="fileUpload" multiple>
AJAX
首先,您需要像这样在“输入类型文件”中获取选择的所有文件。
var file_data = $('input[type="file"]')[0].files;
var form_data = new FormData();
for(var i=0;i<file_data.length;i++)
{
form_data.append(file_data[i]['name'], file_data[i]);
}
然后您所有的数据都在formData对象中,现在您可以像这样将其发送到server(php)。
$.ajax({
url: 'upload.php', //your php action page name
dataType: 'json',
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (result) {
// code you want to execute on success of ajax request
},
error: function (result) {
//code you want to execute on failure of ajax request
}
});
PHP
<?php
foreach($_FILES as $key=>$value)
{
move_uploaded_file($_FILES[$key]['tmp_name'], 'uploads/' .$_FILES[$key]['name']);
}