简单实现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的表格操作插件
Apr 22 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
javascript与有限状态机详解
May 08 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
用python代码做configure文件
2014/07/20 Python
python爬虫常用的模块分析
2014/08/29 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python删除某个字符
2018/03/19 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
介绍一下MD5加密算法
2016/11/12 面试题
linux面试题参考答案(9)
2015/01/07 面试题
单位委托书范本
2014/04/04 职场文书
大四毕业生自荐书
2014/07/05 职场文书
学校端午节活动方案
2014/08/23 职场文书
研究生导师推荐信
2014/09/06 职场文书
教育合作协议范本
2014/10/17 职场文书
项目验收申请报告
2015/05/15 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
解决MySQL报“too many connections“错误
2022/04/19 MySQL
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android