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

<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. ajax基本原理

  2. 实验一:通过bridge-utils工具创建网桥并实现网络连接

    实验名称: 通过bridge-utils工具创建网桥并实现网络连接 实验环境: 实验要求: 安装bridge-utils工具,创建网桥br0,通过brctl命令,为网桥配置IP地址192.168.23 ...

  3. PHP运行出现Notice : Use of undefined constant 的解决办法

    这些是 PHP 的提示而非报错,PHP 本身不需要事先声明变量即可直接使用,但是对未声明变量会有提示.一般作为正式的网站会把提示关掉的,甚至连错误信息也被关掉 关闭 PHP 提示的方法 搜索php.i ...

  4. 爬虫基础线程进程学习-Scrapy

    性能相关 学习参考:http://www.cnblogs.com/wupeiqi/articles/6229292.html 在编写爬虫时,性能的消耗主要在IO请求中,当单进程单线程模式下请求URL时 ...

  5. C++环境的配置( windows)

    方法一.——VS: 使用windows开发神器visio studio.这种方法比较简单,直接下载一个最新的vs安装就行.不单单是C++,C.C#.VB等都可以开发. 方法二.——只安装C++编译器: ...

  6. easyui增删改查前段代码

    <script> var url; //添加用户窗体 function newUser() { $('#dlg').dialog('open').dialog('setTitle', '学 ...

  7. 批量IP自动ping脚本

    批量IP自动ping脚本ping.sh 在同一目录新建一个名为pingip的文件,并以每行一个IP的方式罗列.使用sh命令执行ping.sh #!/bin/bash IP_LIST=`cat ping ...

  8. VS2017打包设置

    本文为网络贴文,引用于:http://www.cnblogs.com/overstep/p/6942423.html 一.  安装打包插件: 安装打包插件:Microsoft Visual Studi ...

  9. CentOS 7 无法yum安装解决方法

    1)下载repo文件 wget http://mirrors.aliyun.com/repo/Centos-7.repo 2)备份并替换系统的repo文件 .repo /etc/yum.repos.d ...

  10. JVM系列1:Java内存区域

    JVM系列主要分享自己都虚拟机的理解,我自学时的知识框架多来源于<深入理解Java虚拟机_JVM高级特性与最佳实践>这本书,感兴趣的朋友可直接去阅读这本书. 本系列暂定有3部分,它们是学习 ...