在CodeIgniter中使用ajax上传文件以及其他字段数据

9 浏览
0 Comments

在CodeIgniter中使用ajax上传文件以及其他字段数据

在这里,我如何上传文件并与其他字段数据一起上传?

0
0 Comments

在CodeIgniter中使用Ajax上传文件以及其他字段数据的问题的原因是无法正确地将文件与其他字段数据一起发送。解决方法是使用FormData对象来处理文件和字段数据,并使用XMLHttpRequest对象进行异步POST请求。以下是解决方案的具体代码:

首先,创建一个FormData对象:

var myFormData = new FormData();

然后,使用jQuery的each方法遍历文件输入框和文本输入框,并将文件和字段数据添加到FormData对象中:

var inputs = $('#my_form input[type="file"]');
$.each(inputs, function(obj, v) {
  var file = v.files[0];
  var filename = $(v).attr("data-filename");
  var name = $(v).attr("id");
  myFormData.append(name, file, filename);
});
var inputs = $('#my_form input[type="text"]');
$.each(inputs, function(obj, v) {
  var name = $(v).attr("id");
  var value = $(v).val();
  myFormData.append(name, value);
});

接下来,创建一个XMLHttpRequest对象,并使用open方法指定请求的类型、URL和是否异步:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/echo/html/', true);

最后,使用send方法发送请求,并将FormData对象作为参数传递给send方法:

xhr.send(myFormData);

在HTML部分,我们需要引入jQuery库,并创建一个包含文件输入框、文本输入框和按钮的表单:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my_form" enctype="multipart/form-data">
    <input type="file" name="file_1" id="file_1" data-filename="image.jpg">
    <input type="text" name="check1" id="check1"/>
    <input type="text" name="check2" id="check2"/>
    <input type="text" name="check3" id="check3"/>
    <button>click</button>
</form>

以上就是解决在CodeIgniter中使用Ajax上传文件以及其他字段数据的问题的方法。如果有任何问题,请让我知道。

0