上传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服务器上.这种处理应该由程序进行配置 ...
随机推荐
- 通过spark sql 将 hdfs上文件导入到mongodb
功能:通过spark sql 将hdfs 中文件导入到mongdo 所需jar包有:mongo-spark-connector_2.11-2.1.2.jar.mongo-java-driver-3.8 ...
- Java虚拟机------JVM内存区域
JVM内存区域运行时数据区域分为两种: JVM内存区域 运行时数据区域分为两种: 线程隔离的数据区: 程序计数器 Java虚拟机栈 本地方法栈 所有线程程共享的数据区: Java堆 方法区 JVM 内 ...
- 【Linux】【Jenkins】配置过程中,立即构建时,maven找不到的问题解决方案
在Linux环境下配置Jenkins执行时,发现不能执行Maven,这个比较搞了. A Maven installation needs to be available for this projec ...
- i++ 是线程安全的吗?
相信很多中高级的 Java 面试者都遇到过这个问题,很多对这个不是很清楚的肯定是一脸蒙逼.内心肯定还在质疑,i++ 居然还有线程安全问题?只能说自己了解的不够多,自己的水平有限. 先来看下面的示例来验 ...
- exchang2010OWA主界面添加修改密码选项
原文链接:http://www.mamicode.com/info-detail-1444660.html exchange邮箱用户可以登录OWA修改密码,当AD用户密码过期或者重置密码勾选了“用户下 ...
- leetcode136
public class Solution { public int SingleNumber(int[] nums) { Dictionary<int, int> dic = new D ...
- JavaScript学习-4——DOM对象、事件
本章目录 --------window对象 --------document对象 --------事件 一.window对象 函数调用: 自己封装的函数只写:函数名(): 数学函数Math 例:绝对值 ...
- MySql:SELECT 语句(二)排序 ORDER BY 的使用
1.按单列排序 语句: SELECT col FROM tablename ORDER BY col; ( 一般情况下, ORDER BY 子句中使用的列为选择的列,但也可以使用其他列) 2.按 ...
- EntityFrameworkCore DBFirst
需要引用如下nuget包 Microsoft.EntityFrameworkCore Microsoft.EntityFrameworkCore.SqlServer Microsoft.EntityF ...
- Xshell 6安装与使用教程
随着xshell5出现评估期已过的问题,发现好多人不知道怎么下载免费版的Xshell,在这里我将详细告诉大家如何下载和安装最新的Xshell6远程管理工具. Xshell安装 1.进入xshell英文 ...