原生JS版和jQuery 版实现文件上传功能
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>HTML5 Ajax Uploader</title>
<script src="jquery-2.1.1.min.js"></script>
</head> <body>
<p><input type="file" id="upfile"></p>
<p><input type="button" id="upJS" value="用原生JS上传"></p>
<p><input type="button" id="upJQuery" value="用jQuery上传"></p>
<script>
/*原生JS版*/
document.getElementById("upJS").onclick = function() {
/* FormData 是表单数据类 */
var fd = new FormData();
var ajax = new XMLHttpRequest();
fd.append("upload", 1);
/* 把文件添加到表单里 */
fd.append("upfile", document.getElementById("upfile").files[0]);
ajax.open("post", "test.php", true); ajax.onload = function () {
console.log(ajax.responseText);
}; ajax.send(fd); }
/* jQuery 版 */
$('#upJQuery').on('click', function() {
var fd = new FormData();
fd.append("upload", 1);
fd.append("upfile", $("#upfile").get(0).files[0]);
$.ajax({
url: "test.php",
type: "POST",
processData: false,
contentType: false,
data: fd,
success: function(d) {
console.log(d);
}
});
});
</script>
</body>
</html>
原生JS版和jQuery 版实现文件上传功能的更多相关文章
- 转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...
- jquery组件WebUploader文件上传用法详解
这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
- Node.js新手教程——怎样实现文件上传功能
作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/node ...
- Node.js 博客实例（三）添加文件上传功能
原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 For ...
- MVC5：使用Ajax和HTML5实现文件上传功能
引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...
- nodejs 实现简单的文件上传功能
首先需要大家看一下目录结构,然后开始一点开始我们的小demo. 文件上传总计分为三种方式: 1.通过flash,activeX等第三方插件实现文件上传功能. 2.通过html的form标签实现文件上传 ...
- PHPCMS_V9 模型字段添加单文件上传功能
后台有“多文件上传”功能,但是对于有些情况,我们只需要上传一个文件,而使用多文件上传功能上传一个文件,而调用时调用一个文件URL太麻烦了. 使用说明: 1.打开phpcms\modules\conte ...
- 配置php.ini实现PHP文件上传功能
本文介绍了如何配置php.ini实现PHP文件上传功能.其中涉及到php.ini配置文件中的upload_tmp_dir.upload_max_filesize.post_max_size等选项,这些 ...
随机推荐
- 题解报告：poj 2503 Babelfish（map）
Description You have just moved from Waterloo to a big city. The people here speak an incomprehensib ...
- 修改SolrCloud在ZooKeeper中的配置文件操作记录
修改SolrCloud在ZooKeeper中的配置文件操作记录. 命令执行目录: /opt/solr-/server/scripts/cloud-scripts/ 1.下载配置文件 ./zkcli., ...
- 外文翻译 《How we decide》赛场上的四分卫 第三节
本书导言翻译 本章第二节 1982年,一位名叫Elliot的病人走进了神经科学家Antonio Damasio的办公室.几个月之前,一个小的肿瘤在它的大脑中被切除,切除点与大脑额叶非常靠近.在手术之前 ...
- joomla建站-双语CMS系统开发的实现
首先,请确保你的网站安装了你所需的双语语言,详细安装过程见:https://www.cnblogs.com/surfer/p/9619345.html 第一步:设置内容管理 可以按照个人需求进行语言编 ...
- Shiro 自定义登陆、授权、拦截器
Shiro 登陆.授权.拦截 按钮权限控制 一.目标 Maven+Spring+shiro 自定义登陆.授权 自定义拦截器 加载数据库资源构建拦截链 使用总结: 1.需要设计的数据库:用户.角色.权限 ...
- phpmyadmin在linux下通过sock安装教程
当初是按照 http://www.cnblogs.com/freeweb/p/5262852.html 地址参考安装,因为疏忽,未考虑到版本差异带来的影响(自身安装的是最新版 phpMyAdmin-4 ...
- 【C++】异常简述(一):C语言中的异常处理机制
人的一生会遇到很多大起大落,尤其是程序员. 程序员写好的程序,论其消亡形式无非三种:无疾而终.自杀.他杀. 当然作为一名程序员,最乐意看到自己写的程序能够无疾而终,因此尽快的学习异常处理机制是非常重要 ...
- Vue 拦截器的使用
拦截器 可以全局进行拦截器设置.拦截器在发送请求前或响应返回时做一些特殊的处理. 拦截器的注册 Vue.http.interceptors.push({ request: function ( req ...
- vue1.0生命周期
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 08C++函数
函数 4.1 概述 一个较大的程序不可能完全由一个人从头至尾地完成,更不可能把所有的内容都放在一个主函数中.为了便于规划.组织.编程和调试,一般的做法是把一个大的程序划分为若干个程序模块(即程序文件) ...