简单实现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选择没有colspan属性的td的代码
Jul 06 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
JavaScript中原型和原型链详解
2015/02/11 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
学术会议主持词
2014/03/17 职场文书
初中班主任评语
2014/04/24 职场文书
股东授权委托书范文
2014/09/13 职场文书
庆七一主持词
2015/06/29 职场文书
美容院管理规章制度
2015/08/05 职场文书