简单实现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学习3:操作元素属性和特性
Feb 07 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
JavaScript函数模式详解
Nov 07 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
微信JS接口大全
Aug 25 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
不得不看之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 上传功能实例代码
2010/04/13 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python编码爬坑指南(必看)
2016/06/10 Python
Python中动态创建类实例的方法
2017/03/24 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Python实现打印实心和空心菱形
2019/11/23 Python
python处理RSTP视频流过程解析
2020/01/11 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
python datetime处理时间小结
2020/04/16 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
大学生求职信例文
2014/06/29 职场文书
运动会稿件100字
2014/09/24 职场文书
个人合伙协议书范本
2014/10/14 职场文书
2014年销售工作总结
2014/12/01 职场文书
辩护词范文大全
2015/05/21 职场文书
公司会议开幕词
2016/03/03 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电