原生javascript实现文件异步上传的实例讲解
效果图:
代码:(demo33.jsp)
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>demo33.jsp</title> </head> <body> <label for="text">名称</label> <input type="text" id="text" name="name"/> <label for="file">文件</label> <input type="file" id="file" name="file"/> <button type="button" onclick="ajaxUploadFile()">确定</button> </body> <script type="text/javascript"> function ajaxUploadFile() { var formData = new FormData(); var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("POST","/data",true); xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest"); formData.append("name",document.getElementById("text").value); formData.append("file",document.getElementById("file").files[0]); xmlhttp.send(formData); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { if (xmlhttp.status==200) { console.log("上传成功"+xmlhttp.responseText); }else { console.log("上传失败"+xmlhttp.responseText); } } } } </script> </html>
以上这篇原生javascript实现文件异步上传的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
原生JavaScript实现异步多文件上传
这是在上篇的修改版本.后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的JavaScript 代码,所以我们主要看JS代码. 先介绍一下技术参数: 页面技术:HTML5 后台技术:Servlet 3.0 服务器:Tomcat 7.0 脚本:JavaScript HTML5 file组件的新属性 accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了,实在是很方便. multiple:是否允许选择多个文件 HTML5 页面代码修改后 <img widt
-
JavaScript异步上传图片文件的实例代码
html: <form action="url" enctype="multipart/form-data" id="myform" method="post"> <input accept="image/*" id="addfile" type="file" /> </form> jquery: $("#addfile&
-
inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)
像QQ邮箱提示.百度的搜索框提示.淘宝的商品搜索提示等,现在有不少的网站都有类似效果,以提升用户体验. 使用方法: new InputSuggest({ input HTMLInputElement 必选 data Array ['sina.cn','sina.com','2008.sina.com','vip.sina.com.cn'] 必选 containerCls 容器className itemCls 容器子项className activeCls 高亮子项className width
-
JavaScript中三种异步上传文件方式
异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能.这里我提出三点有关异步文件上传的方式. 使用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpRequest2来实现异步上传. 第一种使用浏览器插件上传,需要一定的底层编码功底,在这里我就不讲了,以免误人子弟,提出这点大家可以自行百度. 第二种使用隐藏的iframe模拟异步上传.为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中,所以才没有使
-
原生javascript实现文件异步上传的实例讲解
效果图: 代码:(demo33.jsp) <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>demo33.jsp</title> </head> <body> <label for="text">名称</label>
-
java基于servlet的文件异步上传
在这里使用了基于servlet的文件异步上传,好了废话不多说,直接上代码了... package com.future.zfs.util; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.util.Iterator; import java.util.List; import javax.servlet.ServletException; import javax.s
-
ajax实现文件异步上传并回显文件相关信息功能示例
本文实例讲述了ajax实现文件异步上传并回显文件相关信息功能.分享给大家供大家参考,具体如下: 上传文件的信息 <div class="form-group"> <div class="col-sm-4"> <label class="control-label">应用文件</label> </div> <div class="col-sm-8"> <
-
表单上传功能实现 ajax文件异步上传
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一.jQuery官方下载地址:https://jquery.com/download/ 一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="multipart/form-d
-
jQuery多文件异步上传带进度条实例代码
先给大家展示下效果图: ///作者:柯锦 ///完成时间:2016.08.16 ///多文件异步上传带进度条 (function ($) { function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024, // or 1000 sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes)
-
浅谈struts1 & jquery form 文件异步上传
1.概述 还在用struts1?是的,在地球的没写地方,落后的生产方式还在运转(老项目). 从 继承org.apache.struts.action.Action, 继承org.apache.struts.action.ActionForm开始吧 2. 代码 2.1 html页面 <html> <head> <title>网页上传</title> </head> <body> <center> <h1>本地文件
-
JavaWeb文件上传下载实例讲解(酷炫的文件上传技术)
一.课程概述 在Web应用系统开发中,文件上传功能是非常常用的功能,今天来主要讲讲JavaWeb中的文件上传功能的相关技术实现,并且随着互联网技术的飞速发展,用户对网站的体验要求越来越高,在文件上传功能的技术上也出现许多创新点,例如异步上传文件,拖拽式上传,黏贴上传,上传进度监控,文件缩略图,大文件断点续传,大文件秒传等等. 本课程需要的基础知识: 了解基本的Http协议内容 基本IO流操作技术 Servlet基础知识 javascript/jQuery技术基础知识 二.文件上传的基础 对于文件
-
webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码
注意: 1,webuploader上传组件会和jQuery自带的上传组件冲突,所以不要使用<form>标签中添加上传文件的属性; enctype="multipart/form-data" 2.并且屏蔽ApplicationContext-mvc.xml里面的拦截配置! <!-- 上传拦截,如最大上传值及最小上传值 --> <!--新增加的webuploader上传组件,必须要屏蔽这里的拦截机制 <bean id="multipartRes
-
jQuery.uploadify文件上传组件实例讲解
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带上传进度等等.在最近的短信平台开发中,使用Uploadify进行文件上传. Uploadify官网地址是:http://www.uploadify.com/ 可满足项目开发需求. 下载地址:http://www.uploadify.com/wp-content/uploads/files/
-
php没有文件被上传的实例分析及解决办法
1.修改php.ini,设置上传文件的大小. 2.在httpd.conf中添加"php_value upload_max_filesize "300M"". 3.重启服务器即可. 使用ThinkPhp框架上传小图片文件成功,上传大文件失败. 后来查找了原因,是因为php限制了上传文件的大小,修改php.ini如下配置: upload_max_filesize = 300M post_max_size = 300M 重启服务器,依然如此,问题并未得到解决. 解决方法如
随机推荐
- asp.net 文件上传实例汇总
- php项目中百度 UEditor 简单安装调试和调用
- Android封装的http请求实用工具类
- php设计模式 State (状态模式)
- 使用Python中的greenlet包实现并发编程的入门教程
- 用Python写一个无界面的2048小游戏
- javascript中setTimeout和setInterval的unref()和ref()用法示例
- 适用于javascript开发者的Processing.js入门教程
- JavaScript 浏览器验证代码(来自discuz)
- Powershell脚本中使用条件断点实例
- 用C语言进行最基本的socket编程
- 有关json_decode乱码及NULL的问题
- Java中如何动态创建接口的实现方法
- 解决无法在unicode和非unicode字符串数据类型之间转换的方法详解
- 让你同时上传 1000 个文件 (一)
- 基于策略的多路径广域网
- android开发之关闭所有的activity的方法
- 微信小程序和百度的语音识别接口详解
- 详解swift中xcworkspace多项目管理
- 新版本IntelliJ IDEA 构建maven,并用Maven创建一个web项目(图文教程)