[英]How to upload and move file onclick button jquery using codeigniter?
With this code I want to insert and move a file into a folder but when I choose a file and upload it shows me an error in my console:使用此代码,我想插入文件并将其移动到文件夹中,但是当我选择文件并上传时,它在控制台中显示错误:
Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
未捕获的 TypeError:无法构造“FormData”:参数 1 不是“HTMLFormElement”类型。
How can I solve this problem?我怎么解决这个问题? Please help me.
请帮我。 Thank You
谢谢你
<input type="file" id="multiFiles" name="files" />
<button id="upload_file_multiple" class="btn btn-success add-btn update-btn">Upload</button>
$("#upload_file_multiple").click(function(event) {
event.preventDefault();
var form_data = new FormData($("#multiFiles"));
var id = "<?php echo $this->uri->segment(3) ?>";
jQuery.ajax({
type: "POST",
url: "<?php echo base_url() ?>syllabus/UploadFile/" + id,
data: form_data,
processData: false,
contentType: false,
success: function(response) {
$('#afx_khjk').html(response);
},
error: function(response) {
$('#afx_khjk').html(response);
}
});
});
public function UploadFile($id)
{
if (isset($_FILES['files']) && !empty($_FILES['files']))
{
$rename = 'file_no-'.time().$_FILES["files"]["name"];
move_uploaded_file($_FILES["files"]["tmp_name"], 'uploads/syllabus/' . $rename);
$data = array(
'pdf'=>$rename,
'subjectID'=>$id,
'unique_id'=>time()
);
$this->db->insert('sylabus_pdf',$data);
$insert_id = $this->db->insert_id();
echo 'File successfully uploaded : uploads/syllabus/' . $rename . ' ';
$this->commondata($id);
}
else
{
echo 'Please choose at least one file';
}
}
The error is because the FormData
constructor expects an FormElement object, not a jQuery object containing an input
.该错误是因为
FormData
构造函数需要一个 FormElement object,而不是 jQuery object 包含一个input
。
To fix this create the FormData object with the empty constructor and use append()
to add your file:要解决此问题,请使用空构造函数创建 FormData object 并使用
append()
添加您的文件:
var input = document.querySelector('#multiFiles');
var form_data = new FormData();
for (var i = 0; i < input.files.length; i++) {
form_data.append('files[]', input.files[i]);
}
Alternatively you can make this more simple by providing the form
to the constructor.或者,您可以通过向构造函数提供
form
来使这更简单。 That way the data in all form controls will be included for you automatically.这样,所有表单控件中的数据都会自动包含在内。
var form_data = new FormData($('#yourForm')[0]);
HTML HTML
<form id="frm_upload_file">
<input type="file" id="multiFiles" name="files" />
<button type="submit" id="upload_file_multiple" class="btn btn-success add-btn update-btn">Upload</button>
</form>
Ajax Ajax
$("#frm_upload_file").submit(function (event) {
event.preventDefault();
var id = "<?php echo $this->uri->segment(3) ?>";
var form_data = new FormData(this);
jQuery.ajax({
type: "POST",
url: "<?php echo base_url() ?>syllabus/UploadFile/" + id,
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function (response) {
$('#afx_khjk').html(response);
},
error: function (response) {
$('#afx_khjk').html(response);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.