上传input中file文件到云端,并返回链接
有的文件、图片等信息可以上传到云端上,然后使用链接调用,这样会更加的方便和快捷。
<form id="form">
<input type="file" id="input">
<input type="text" id="text">
</form>
<button id="button">上传</button>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$("#button").click(function () {
if (window.FormData){
var FormData = new FormData();
FormData.append("file",document.getElementById("input").files[0]);
var XMLHttpRequest = new XMLHttpRequest();
XMLHttpRequest.open("POST","此处为上传的接口");
XMLHttpRequest.onload = function () {
if (XMLHttpRequest.status === 200){
var response = JSON.parse(XMLHttpRequest.response);
$("#text").val(response.data);
} else {
alert("Failure");
}
};
XMLHttpRequest.send(FormData);
}
else {
alert("莫名错误");
}
});
</script>
上传input中file文件到云端,并返回链接的更多相关文章
- Ajax 上传input type file 文件
Html: <div class="attach-img"> <label><input type="file" id=" ...
- 文件上传input type="file"样式美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js 压缩上传的图片方法(默认上传的是file文件)
//压缩图片方法 function compressImg(file,callback){ var src; var fileSize = parseFloat(parseInt(file['size ...
- HTML-js 压缩上传的图片方法(默认上传的是file文件)
//压缩图片方法 function compressImg(file,callback){ var src; var fileSize = parseFloat(parseInt(file['size ...
- Plupload上传插件中文文档
Plupload上传插件中文帮助文档 如有疑问,加群交流:646104701 下载地址:https://www.plupload.com/download/ 配置参数 实例化一个plupload对象时 ...
- php 文件上传$_FILES中error返回值详解
用PHP上传文件时,我们会用程序去监听浏览器发送过来的文件信息,首先会通 过$_FILES[fieldName]['error']的不同数值来判断此欲上传的文件状态是否正常.$_FILES[field ...
- input上传指定类型的文件
1. 谷歌–上传文件夹 添加属性webkitdirectory <input type = "file" webkitdirectory> 2. 上传文件–限制类型 添 ...
- [PHP学习教程 - 文件]002.修改上传文件大小限制(File Upload Limit)
引言:通常大家直装xampp之后,默认的文件上传大小应该被设定成2M左右,这个时候如果上传超过2M的东西,就会报错,让人非常尴尬.如何修改呢? 导航索引: 概念 FTP常用API FTP封装类 其他 ...
- 基于SqlSugar的开发框架循序渐进介绍(7)-- 在文件上传模块中采用选项模式【Options】处理常规上传和FTP文件上传
在基于SqlSugar的开发框架的服务层中处理文件上传的时候,我们一般有两种处理方式,一种是常规的把文件存储在本地文件系统中,一种是通过FTP方式存储到指定的FTP服务器上.这种处理应该由程序进行配置 ...
随机推荐
- Flask-在Flask中跨请求传递数据资源
利用 Flask的底层Werkzeug是有缓存支持的,不用使用redis等第三方. 原文地址如下: https://blog.csdn.net/yannanxiu/article/details/52 ...
- seleniuim面试题1
seleniuim面试题1 乙醇 创建于 4 个月 之前 最后更新时间 2018-09-11 selenium中如何判断元素是否存在? selenium中没有提供原生的方法判断元素是否存在,一般我们可 ...
- Java --Servlet 32个经典问题
Servlet方面 1.说一说Servlet的生命周期? Servlet有良好的生存期的定义,包括加载和实例化.初始化.处理请求以及服务结束.这个生存期由javax.servlet.Servlet接口 ...
- 如何使用 Visual C# .NET 处理 Excel 事件
事件处理概述 Visual C# .NET 使用委派处理来自组件对象模型 (COM) 服务器的事件.委派是 Microsoft Visual Studio .NET 中的一个新概念.对于 COM 事件 ...
- RocketMQ入门(Filter)_5
RocketMQ中存储的消息对于消费者来说,并不完全都是他们需要的,因此需要对消息进行过滤. 订阅Topic主题 ,选择Tags都是我们简单的过滤.Topic是大分类,Tags是二级分类. Rocke ...
- RAD Studio 10.3 来了
官方原版下载链接:HTTP FTP 官方更新说明:http://docwiki.embarcadero.com/RADStudio/Rio/en/What's_New [官方更新说明简译]1.Delp ...
- funny故事
name1 = input('请输入一个名字:') name2 = input('请输入一个名字:') vehicle = input('请输入一种车子:') print('\n上近代史的{}刚下课, ...
- Android 阻隔返回键
//阻隔 返回键 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.K ...
- DOM 节点node
DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构,即在HTML中所有内容都是节点.文档节点是每个文档的根节点,文档节点有一个子节点,称为文档元素.每个文档只能有一个文档元素.在HTM ...
- gdbserver
这里写下gdbserver的用法: 两台机子,宿主机A和目标机B. step1: 我们在B上安装gdbserver,在A上编译可执行程序a.out,把a.out拷贝到B上面去. step2: 在A上打 ...