简单实现js上传文件功能
本文实例为大家分享了js实现上传文件功能的具体代码，供大家参考，具体内容如下
一、用input完成上传，效果图如
选择文件后，提交后出现图片url
二、传输格式采用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);
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Servlet实现简单文件上传功能，包括了Servlet实现简单文件上传功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Servlet文件上传的具体代码，供大家参考，具体内容如下 两点要素： 1.表单提交方式必须是post 2.enctype一定要是multipart/form-data。 enctype的默认值是application/x-www-form-url
-
依赖模块 安装依赖 npm install --save busboy busboy 是用来解析出请求中文件流 例子源码 demo源码 https://github.com/ChenShenhai/koa2-note/blob/master/demo/upload/ 封装上传文件到写入服务的方法 const inspect = require('util').inspect const path
-
本文向大家介绍使用nodejs+express实现简单的文件上传功能，包括了使用nodejs+express实现简单的文件上传功能的使用技巧和注意事项，需要的朋友参考一下 1.建立express项目 2.下载multer中间件 3.在routes/index.js中引用multer，由于还要使用到文件操作，还要引用fs模块,并指定文件上传目录 单文件上传: index.html中文件如下( for
-
本文向大家介绍Struts2实现上传单个文件功能，包括了Struts2实现上传单个文件功能的使用技巧和注意事项，需要的朋友参考一下 upload.jsp 这个页面选择提交文件，提交到uploadImage.action FileUploadAction.java 将传来的file进行处理 uploadFileName和uploadContentType，这两个属性分别用于封装上传文件的文件名、上传
-
本文向大家介绍js 上传文件预览的简单实例，包括了js 上传文件预览的简单实例的使用技巧和注意事项，需要的朋友参考一下 1. FILE API html5提供了FIle和FileReader两个方法，可以读取文件信息并读取文件。 2. example 以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码).
-
本文向大家介绍php文件上传简单实现方法，包括了php文件上传简单实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了php文件上传的简单实现方法。分享给大家供大家参考。具体如下： 文件1：index.php 文件2：uploadProcess.php 希望本文所述对大家的php程序设计有所帮助。