有的文件、图片等信息可以上传到云端上,然后使用链接调用,这样会更加的方便和快捷。

<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文件到云端,并返回链接的更多相关文章

  1. Ajax 上传input type file 文件

    Html: <div class="attach-img"> <label><input type="file" id=" ...

  2. 文件上传input type="file"样式美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. js 压缩上传的图片方法(默认上传的是file文件)

    //压缩图片方法 function compressImg(file,callback){ var src; var fileSize = parseFloat(parseInt(file['size ...

  4. HTML-js 压缩上传的图片方法(默认上传的是file文件)

    //压缩图片方法 function compressImg(file,callback){ var src; var fileSize = parseFloat(parseInt(file['size ...

  5. Plupload上传插件中文文档

    Plupload上传插件中文帮助文档 如有疑问,加群交流:646104701 下载地址:https://www.plupload.com/download/ 配置参数 实例化一个plupload对象时 ...

  6. php 文件上传$_FILES中error返回值详解

    用PHP上传文件时,我们会用程序去监听浏览器发送过来的文件信息,首先会通 过$_FILES[fieldName]['error']的不同数值来判断此欲上传的文件状态是否正常.$_FILES[field ...

  7. input上传指定类型的文件

    1. 谷歌–上传文件夹 添加属性webkitdirectory <input type = "file" webkitdirectory> 2. 上传文件–限制类型 添 ...

  8. [PHP学习教程 - 文件]002.修改上传文件大小限制(File Upload Limit)

    引言:通常大家直装xampp之后,默认的文件上传大小应该被设定成2M左右,这个时候如果上传超过2M的东西,就会报错,让人非常尴尬.如何修改呢? 导航索引: 概念 FTP常用API FTP封装类 其他 ...

  9. 基于SqlSugar的开发框架循序渐进介绍(7)-- 在文件上传模块中采用选项模式【Options】处理常规上传和FTP文件上传

    在基于SqlSugar的开发框架的服务层中处理文件上传的时候,我们一般有两种处理方式,一种是常规的把文件存储在本地文件系统中,一种是通过FTP方式存储到指定的FTP服务器上.这种处理应该由程序进行配置 ...

随机推荐

  1. javascript常用工具类整理(copy)

    JavaScript常用工具类 类型 日期 数组 字符串 数字 网络请求 节点 存储 其他 1.类型 isString (o) { //是否字符串 return Object.prototype.to ...

  2. leetCode26.删除排序数组中的重复项

    给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例 1 ...

  3. JAVA多线程17个问题

    1.Thread 类中的start() 和 run() 方法有什么区别? Thread.start()方法(native)启动线程,使之进入就绪状态,当cpu分配时间该线程时,由JVM调度执行run( ...

  4. itextsharp图片生成pdf模糊问题解释

    I forget to mention that I' am using itextsharp 5.0.2. It turned out that PDF DPI = 110, which means ...

  5. leetcode301

    class Solution { public List<String> removeInvalidParentheses(String s) { List<String> a ...

  6. LNMP 支持 ThinkPHP 的 pathinfo 模式

    注意使用LNMP 1.4版 1.修改php.ini 启用pathinfo /usr/local/php/etc/php.ini cgi.fix_pathinfo = 0 值改为1 2.修改/usr/l ...

  7. ReactiveX 学习笔记(24)使用 RxCpp + C++ REST SDK 调用 REST API

    JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...

  8. Python常用内置函数介绍

    Python提供了一个内联模块buildin.内联模块定义了一些开发中经常使用的函数,利用这些函数可以实现数据类型的转换.数据的计算.序列的处理等功能.下面将介绍内联模块中的常用函数. Python内 ...

  9. 《CSAPP》符号和符号表

    符号和符号表 每个可重定位目标模块m都有一个符号表,它包含m所定义和引用的符号的信息. 有三种不同的符号: 由m定义并能被其他模块引用的全局符号.对应非静态的C函数以及不带C static属性的全局变 ...

  10. VueJs相关学习网址

      麦子学院 http://www.maiziedu.com/course/916/   慕课网-vue.js入门基础 https://www.imooc.com/learn/694   查阅的网址 ...