如何通过AJAX和jQuery使用HTML5文件上传?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (108)

想要做的事情:

  • 上传整个形式的数据,其中一部分是单个文件
  • 使用Codeigniter的文件上传库

直到这里,一切都很好。数据在我需要的时候进入我的数据库。我也想通过AJAX帖子提交我的表单:

  • 使用本机HTML5文件API,而不是Flash或iframe解决方案
  • 最好与低级.ajax()jQuery方法交互

我想可以想象如何通过自动上传文件来实现这一点,当字段的值更改使用纯JavaScript时,我宁愿一举全部在jQuery中提交。我认为不可能通过查询字符串来完成,因为我需要传递整个文件对象。

提问于
用户回答回答于

当表单提交时,赶上提交过程

var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st file
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = shipOff;
//reader.onloadstart = ...
//reader.onprogress = ... <-- Allows you to update a progress bar.
//reader.onabort = ...
//reader.onerror = ...
//reader.onloadend = ...


function shipOff(event) {
    var result = event.target.result;
    var fileName = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg'
    $.post('/myscript.php', { data: result, name: fileName }, continueSubmission);
}

然后,在服务器端(即myscript.php):

$data = $_POST['data'];
$fileName = $_POST['name'];
$serverFile = time().$fileName;
$fp = fopen('/uploads/'.$serverFile,'w'); //Prepends timestamp to prevent overwriting
fwrite($fp, $data);
fclose($fp);
$returnData = array( "serverFile" => $serverFile );
echo json_encode($returnData);

或者类似的东西。

热门问答

腾讯加固助手不能下载了吗?下载地址在哪里?MAC可以下载吗?我看只能在网页上加固,自己签名。?

腾讯云@移动安全

腾讯 · 移动开发工程师 (已认证)

腾讯云移动安全前端开发
推荐

乐固客户端已下线,可以使用移动应用在线加固https://console.cloud.tencent.com/ms/reinforce/list

可以自行签名打渠道包。

能提供腾讯区块链TBaas技术上链对接的流程图吗?

您好,非常感谢您的建议,我们目前确实没有整理完整的流程图,我们会尽快补齐并上线。 文字版的流程您可以先参考一下: 1,梳理业务场景和流程 2,规划区块链网络规模 3,购买区块链节点、组建区块链网络 4,根据业务场景编写智能合约 5,应用系统调用区块链的智能合约,与链交互 如果...... 展开详请

关于云直播的几个问题,望大佬解惑?

学生路人
推荐

1 海外单独计费

2 地址都是自己算的 可以变也可以不变

3 这个接口是拉流转推的 ,和播放不是一个东西哈 。

我用spark多个特征处理算子对原始数据进行处理,最后通过决策树训练分类,请问怎么导出最终模型?

腾讯智能钛AI开发者

腾讯云 · 智能钛产品团队 (已认证)

腾讯智能钛产品团队官方运营账号。分享产品最新动态,第一时间解答用户疑问。
推荐

您好,如果是使用组件自己编写的代码,可以使用 spark 中的 pipeline 功能,将多个功能串成一个流水线,再把流水线导出为 pmml 模型。详见 https://github.com/jpmml/jpmml-sparkml。

TencentOS例程,keil5编译报错no such file or directory?

Supowang

腾讯 · 高级工程师 (已认证)

腾讯物联网操作系统TencentOS tiny产品接口人---岁寒知松柏,做最好的自己!
推荐
您好!您的代码是早期的代码,请使用最新的github代码,代码下载地址:https://github.com/Tencent/TencentOS-tiny 或者腾讯工蜂 https://git.code.tencent.com/Tencent_Open_Source/Tence...... 展开详请

TBaaS 区块链,有哪些字段能展示在app界面上?公钥、数据证书、哈希值?

霜燃腾讯云区块链专家研发工程师
推荐
您好,回答您的问题: 问:公司有个项目要介入 TBaaS 区块链,有哪些字段能展示在app界面上的? 答:这里给出了几个查询链状态的接口(https://cloud.tencent.com/document/product/663/35190 ),接口中返回的字段,都可以作为字段...... 展开详请

扫码关注云+社区

领取腾讯云代金券