Ajax实现上传图像功能的示例详解
最终效果展示
xhr发起请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--1、文件选择框 -->
<input type="file" id="file1">
<!-- 2、上传文件的按钮 -->
<button id="btnupload">上传文件</button>
<br/>
<div class="progress" style="width:300px;margin:5px;">
<div class="progress-bar progress-bar-striped active" style="width: 0%;" id="precent">
0%
</div>
</div>
<!-- 3、img标签 来显示上传成功以后的图片 -->
<img alt="" id="img" width="800">
<script>
var precent = document.querySelector('#precent')
var btnupload = document.querySelector('#btnupload')
btnupload.addEventListener('click', function() {
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件')
}
var fd = new FormData()
fd.append('avatar', files[0])
var xhr = new XMLHttpRequest()
xhr.upload.onprogress = function(e) {
console.log(e);
if (e.lengthComputable) {
var h = Math.ceil((e.loaded / e.total) * 100)
precent.style.width = h + '%'
precent.innerHTML = h + '%'
console.log(h);
}
}
xhr.upload.onload = function() {
$('#precent').removeClass().addClass('progress-bar progress-bar-success')
}
xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
xhr.send(fd)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText)
console.log(data);
if (data.status == 200) {
console.log('上传成功');
document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
} else {
console.log('上传失败');
}
}
}
})
</script>
</body>
</html>
ajax发起请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
<style>
img {
width: 50px;
height: 50px;
display: none;
}
</style>
</head>
<body>
<input type="file" id="file1">
<button id="btnupload">上传文件</button>
</br>
<img src="5-121204193R5-50.gif" alt="" id="loading">
<script>
$(function() {
$(document).ajaxStart(function() {
$('#loading').show()
})
$(document).ajaxStop(function() {
$('#loading').hide()
})
$('#btnupload').on('click', function() {
var files = $('#file1')[0].files
if (files.length <= 0) {
alert('请选择文件')
}
console.log('ok');
var fd = new FormData()
fd.append('avatar', files[0])
$.ajax({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/upload/avatar',
data: fd,
processData: false,
contentType: false,
success: function(res) {
console.log(res);
}
})
})
})
</script>
</body>
</html>
到此这篇关于Ajax实现上传图像功能的示例详解的文章就介绍到这了,更多相关Ajax上传图像内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
springmvc+ajax+formdata上传图片代码实例
最近工作涉及到了上传图片的情况,在网上看了很多,就着重学习了下.上传文件的方式有多种,这里对使用FormData的方式进行说明. 1.springmvc项目想要上传文件,需要使用multipart方式,所以在spring-mvc.xml配置文件中需要增加multipart相关配置,代码如下 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultip
-
Ajax上传图片及上传前先预览功能实例代码
手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT
-
Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 <input type='file' name='pic'> 当我们点击表单的时候提示选择需要上传的图片.但是此需求我们分析一下,可以在点击图片的时候使用JS实现预览功能,并且楼主也是这样做的.代码如下: function getFileUrl(source
-
基于ajax实现上传图片代码示例解析
js源码: /// <reference path="jquery-1.8.3.js" /> /// <reference path="ajaxForm/jquery.form.js" /> /*! * jQuery upload * 用于上传单个文件,上传成功后,返回文件路径. * 本插件依赖jQuery,jquery.form 请在使用时引入依赖的文件 * * Date: 2014/4/23 */ /* 使用: html: <div
-
ajax +NodeJS 实现图片上传实例
前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note(注意) 大家先在public目录下创建一个名为uploads的文件夹,这个文件夹是用来保存你上传过的图片 安装multer模块: npm i -S multer code(代码) 1.app.js const express = require('express'); const multer = requi
-
Ajax实现上传图像功能的示例详解
最终效果展示 xhr发起请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt
-
.NetCore实现上传多文件的示例详解
本章和大家分享的是.NetCore的MVC框架上传文件的示例,主要讲的内容有:form方式提交上传,ajax上传,ajax提交+上传进度效果,Task并行处理+ajax提交+上传进度,相信当你读完文章内容后能后好的收获,如果可以不妨点个赞:由于昨天电脑没电了,快要写完的内容没有保存,今天早上提前来公司从头开始重新,断电这情况的确让人很头痛啊,不过为了社区的分享环境,这也是值得的,不多说了来进入今天的正篇环节吧: form方式上传一组图片 先来看看咋们html的代码,这里先简单说下要上传文件必须要
-
Python Flask实现图片上传与下载的示例详解
目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html 介绍 5.1 upload Jinja 模板介绍 5.2 upload css 介绍(虚线框) 5.3 upload js 介绍(拖拽) 1.效果预览 我们基于 Flask 官方指导工程,增加一个图片拖拽上传功能,效果如下: 2.新增逻辑概览 我们在官方指导工程上进行增加代码,改动如下: 由于 fl
-
JavaScript获取上传文件相关信息示例详解
目录 前题场景 处理方式 图片文件 音频文件 判断处理 分析总结 前题场景 在开发过程中,文件上传是再熟悉不过的场景了,但是根据实际使用情况对上传文件的限制又各有不同.需要对本地上传文件进行相应的限制处理,防止不符合规则或者要求的文件上传到云存储中,从而造成云盘资源空间浪费. 与此同时,也在给客户端使用文件信息之前做了一次数据过滤处理,减少客户端对文件资源的处理和校验. 处理方式 因为客户端使用后台管理上传的图片文件和音频文件时,为了优化展示效果和加载的速度,所以在后台管理系统上传处希望依据图片
-
TypeScript前端上传文件到MinIO示例详解
目录 什么是MinIO? 本地Docker部署测试服务器 上传的API TypeScript实现 1. XMLHttpRequest 2. Fetch API 3. Axios 从后端获取临时上传链接 上传文件 踩过的坑 1. presignedPutObject方式上传提交的方法必须得是PUT 2. 直接发送File即可 3. 使用Axios上传的时候,需要自己把Content-Type填写成为file.type 示例代码 什么是MinIO? MinIO 是一款高性能.分布式的对象存储系统.
-
js前端上传文件缩略图技巧示例详解
目录 引言 文件对象简介 Blob File FileReader FormData 文件对象之间的关系 缩略图的实现 总结 引言 通常情况下,前端提交给服务器的数据格式为JSON格式,但很多时候用户想上传自己的头像.视频等,这些非文本数据的时候,就不能直接以JSON格式上传到后端了. 当我们要获取用户上传的文件,可以使用input表单项,将type属性值设置为“file”. <form action=""> <input type="file"
-
利用jQuery异步上传文件的插件用法详解
现在想实现用ajax来上传文件的功能,但是却发现Jquery自带的ajax方法只能上传文件名,而不能上传文件:用form提交虽然能够上传文件,但是却要刷新页面...多方查找下找到了一个可用的jQuery插件,刚好可以满足异步上传文件的要求. 代码 jquery.form.js 用法 这个插件是基于表单提交的,我们只要正常的写一段提交文件的表单,如: <form id="myForm" action="comment.php" method="post
-
Vue实现高德坐标转GPS坐标功能的示例详解
首先介绍一下常见的几种地图的坐标类型: WGS-84:这是一个国际标准,也就是GPS坐标(Google Earth.或者GPS模块采集的都是这个类型). GCJ-02:中国坐标偏移标准,像是Google Map.高德.腾讯地图都是采用这种坐标展示. BD-09:百度坐标偏移标准,百度地图专用的便宜标准. 所以说这篇博文主要是实现GCJ-02坐标转换成WGS-84坐标. 什么时候会用到需要解决坐标转换的问题呢?起因是一个demo,它使用GPS模块采集经纬度数据,然后使用高德地图进行转换,是的,高德
-
比ant更丰富Modal组件功能实现示例详解
目录 有哪些比ant更丰富的功能 render部分 渲染黑色蒙层 渲染弹框主体 设置body overflow:hiiden 有哪些比ant更丰富的功能 普通的modal组件如下: 我们写的modal额外支持,后面没有蒙版,并且Modal框能够拖拽 还支持渲染在文档流里,上面的都是fixed布局,我们这个正常渲染到文档下面: render部分 <RenderDialog {...restState} visible={visible} prefixCls={prefixCls} header={
-
Flask 上传自定义头像的实例详解
Flask Web 开发这本书基本上做完了,后面还需要温习,但是自己做的博客总觉得简陋了点,所以,在动脑子开发新功能 今天想到最基本的功能,自定义头像 那这样的功能,设计到2大基本功能块 1:如何进行文件的上传和保存 2:如何在用户模型里面将头像照片和用户挂钩起来 第二个问题我在查阅了网上的讨论后,得出基本上2种方法, 第一种是将图片变成二进制以后存入数据库 第二种是将图片直接存放于文件系统中 先研究如何上传文件成功这个事情 从最简单的开始 在main的views文件内,添加以下准备工作 imp