简单实现js上传文件功能


Posted in Javascript onAugust 21, 2017

本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下

一、用input完成上传,效果图如       

简单实现js上传文件功能

选择文件后,提交后出现图片url

简单实现js上传文件功能

二、传输格式采用form-data形式。

html代码 

<form id="upload" enctype="multipart/form-data" method="post"> 
 <input type="file" name="file" id="pic"/> 
 <input type="button" value="提交" onclick="uploadPic();"/> 
 <span class="showUrl"></span> 
 <img src="" class="showPic" alt=""> 
</form>

js部分

function uploadPic() { 
  var form = document.getElementById('upload'), 
    formData = new FormData(form); 
  $.ajax({ 
   url:"https://sscpre.boe.com/v1/medical-console/medical/file/upload", 
   type:"post", 
   data:formData, 
   processData:false, 
   contentType:false, 
   success:function(res){ 
    if(res){ 
     alert("上传成功!"); 
    } 
    console.log(res); 
    $("#pic").val(""); 
    $(".showUrl").html(res); 
    $(".showPic").attr("src",res); 
   }, 
   error:function(err){ 
    alert("网络连接失败,稍后重试",err); 
   } 
 
  }) 
 
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 #Javascript
JavaScript实现简单图片轮播效果
Aug 21 #Javascript
Javascript中 toFixed四舍六入方法
Aug 21 #Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 #Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 #Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 #Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 #Javascript
You might like
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
js html实现计算器功能
2018/11/13 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
python实现内存监控系统
2021/03/07 Python
python读取指定字节长度的文本方法
2019/08/27 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
python-地图可视化组件folium的操作
2020/12/14 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
战友聚会邀请函
2014/01/18 职场文书
部队党性分析材料
2014/02/16 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python