上传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服务器上.这种处理应该由程序进行配置 ...
随机推荐
- 实战ELK(5) Logstash 入门
Logstash 是一个开源的数据收集引擎,它具有备实时数据传输能力.它可以统一过滤来自不同源的数据,并按照开发者的制定的规范输出到目的地. 一.原理 Logstash 通过管道进行运作,管道有两个必 ...
- idea搭建Eureka注册中心
服务的注册与发现 关系调用说明: 服务生产者启动时,向服务注册中心注册自己提供的服务 服务消费者启动时,在服务注册中心订阅自己所需要的服务 注册中心返回服务提供者的地址信息个消费者 消费者从提供者中调 ...
- 尚硅谷springboot学习31-jdbc数据连接
可以使用JdbcTemplate操作数据库,可以在启动的时候自动建表,更新数据表 配置依赖 <dependency> <groupId>org.springframework. ...
- mongodb相关文章
1.Windows 平台安装 MongoDB 2.MONGODB基本命令用 3.MongoDB 教程
- Spring再接触 id与name
事实上 <bean id="u" class="com.bjsxt.dao.impl.UserDAOImpl"> </bean> 也可以 ...
- e1000
http://blog.csdn.net/sdulibh/article/details/41826221 http://blog.csdn.net/evenness/article/details/ ...
- C# dns.gethostentry()获取失败,提示不存在主机
传入参数domain有误. 如果是域名,可以解析.如果是局域ip可以解析. 如果是外网,解析不成功. 解决方法: 判断传入参数是域名还是ip,如果是域名,则使用dns.gethostentry(dom ...
- 41 【docker】初识
常用的docker命令: docker ps #查看当前正在运行的容器 docker ps -a | grep <keyword> #查看所有的容器,运行的或者停止的 docker sto ...
- UI动画优化技巧
知乎上一篇比较好的文章,分享一下: tabs slide 内容过渡动画 好的动画会淡化页面直接的过度. 但更好的做法是使用连续的动画来来过度内容 当我们在设计交互式选项卡或弹出式菜单的时候,尝试将内容 ...
- vue 关于父组件无法触发子组件的事件的解决方法
一般情况导致无法触发子组件的方法 基本都是由于子组件未渲染完成 就进行了调用,解决方法如下: 1.加定时器 setTimeout(() => { //加定时器原因是,子组件页面未渲染处理就做 ...