栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

Ajax上传无法正常工作

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Ajax上传无法正常工作

问题之一是文件上传使用的机制与其他表单

<input>
类型不同。这就是为什么
$this->input->post("userfile")
没有为您完成工作的原因。其他答案建议使用javascript,
FormData
而这个答案也可以。

的HTML

一个非常简单的表单,用于选择文件并提交。请注意从简单按钮更改为

<inputtype="submit"...
。这样做使javascript使用该
FormData
对象变得容易得多。

FormData文档

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        <script src="https://pre.jquery.com/jquery-2.2.2.js"></script>        <title>Upload Test</title>    </head>    <body>        <?= form_open_multipart("upload/post", ['id' => 'uploader']); ?>        <input type="file" name="userfile">        <p> <input type="submit" value="Upload">        </p>        <?php echo form_close() ?>        <div id="message"></div>        <script> $('#uploader').submit(function (event) {     event.preventDefault();     $.ajax({         url: window.location.href + '/post',         type: "POST",         dataType: 'json',         data: new FormData(this),         processdata: false,         contentType: false,         success: function (data) {  console.log(data);  if (data.result === true) {      $("#message").html("<p>File Upload Succeeded</p>");  } else {      $("#message").html("<p>File Upload Failed!</p>");  }  $("#message").append(data.message);         }     }); });        </script>    </body></html>

JAVAscript

使用

FormData
捕捉到的领域。请注意,我们处理提交事件而不是处理按钮单击。

$('#uploader').submit(function (event) {    event.preventDefault();    $.ajax({        url: window.location.href + '/post',        type: "POST",        dataType: 'json',        data: new FormData(this),        processdata: false,        contentType: false,        success: function (data) { //uncomment the next line to log the returned data in the javascript console // console.log(data); if (data.result === true) {     $("#message").html("<p>File Upload Succeeded</p>"); } else {     $("#message").html("<p>File Upload Failed!</p>"); } $("#message").append(data.message);        }    });});

控制器

我添加了一些将结果“报告”到ajax的代码,并将其显示在上传页面上。

class Upload extends CI_Controller{    public function __construct()    {        parent::__construct();        $this->load->helper(['form', 'url']);    }    public function index()    {        $this->load->view('upload_v');    }    public function post()    {        $this->load->library("upload");        $this->upload->initialize(array(     "upload_path" => './uploads/',     'allowed_types' => 'gif|jpg|png|doc|txt',     "overwrite" => FALSE,     "max_filename" => 300,     "encrypt_name" => TRUE,        ));        $successful = $this->upload->do_upload('userfile');        if($successful)        { $data = $this->upload->data(); $image_file = $data['file_name']; $msg = "<p>File: {$image_file}</p>"; $this->data_models->update($this->data->INFO, array("image" => $image_file));        } else { $msg = $this->upload->display_errors();        }        echo json_enpre(['result' => $successful, 'message' => $msg]);    }}

这将上传您的文件。您的工作可能没有完成,因为我怀疑您没有将所需的所有文件信息保存到数据库中。那,我怀疑您会对上载文件的名称感到惊讶。

我建议您研究一下PHP如何处理文件上传,并在SO
上检查有关文件上传的一些类似preigniter相关问题。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/409878.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号