javascript上传文件后台接收

今天在wordpress后台管理的插件管理界面，想添加一个ajax无刷新的上传，然后折腾了一下午，对于一个干前端的来说真心是惭愧呀！

好的，先说一下思路：上传文件，必需得取得当前的文件的数据流，然后通过ajax的post方式发送给服务器处理。

（1）如何获取当前文件的数据流呢？

答：通过FormData()实例化的对象，将文件数据append在一个变量里面

（2）如何获取数据？

答：在type为file的input表单中，自带一个files属性。

HTML页面发送文件上传请求：

   <input type="file" name="upload_img" id='upload_img'/><img src="" id='myfile_img' alt='' title='' width='300'/> <script type="text/javascript">var uploadImg = document.getElementById('upload_img');var myfileImg = document.getElementById('myfile_img');uploadImg.onchange = function(){var imgName = this.files[0].name;//let reader = new FileReader();var fordata = new FormData();fordata.append('my_file',this.files[0]);//向服务器发送文件数据ajaxPost(fordata,function(obj){var content = JSON.parse(obj.response);console.log(content);if(content.status == 'sucess'){myfileImg.src = './images/'+imgName;}});}function ajaxPost(data,fn){var xhr = new XMLHttpRequest();xhr.open('post','./upload.php','true');xhr.send(data);xhr.onload = function(){fn(this);} }</script>

服务器处理文件数据，生成上传的文件：

$success = array('status' => 'sucess', 'code' => '1');
$error = array('status' => 'error', 'code' => '0');if (!empty($_FILES)) {$file = $_FILES['my_file'];$new_file_dir = dirname(__FILE__) . '/images/' . $file['name'];@move_uploaded_file($file['tmp_name'], $new_file_dir);exit(json_encode($success));
} else {exit(json_encode($error));
}

javascript上传文件后台接收相关推荐

ajax上传文件MultipartFile接收
ajax上传文件MultipartFile接收本人亲测,当前项目实际在用的.记录. 前端请求 html < form id="form" name="form&q ...
html上传文件与后台处理,关于前端html图片和文件上传和后台接收方法
前些时间项目和h5交互时涉及到了文件上传的一个功能,但是h5在写上传的时候总是上传不上,所以花时间专门看了下web端的文件上传记录下. 第一种是前端写的,拿来修改了下,这种方法在上传的时候需要用到jq ...
fastDFS上传文件后台报错空指针NullPointException
服务器中部署好之后,用命令上传是可以成功的.返回文件位置id 但页面点击上传文件失败,后台会报空指针之后在其他地方继续测试上传/下载文件发现测试会有的成功有的失败再于服务器用命令测试上传会报错: ...
aws s3直接通过JavaScript上传文件
在html页面通过js上传文件,直接看代码 <!DOCTYPE html> <html> <head> <title>AWS S3 File Uploa ...
微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html  <view class="cont ...
bootstrap_fileinput上传文件后台接受额外的参数
如果是你,你会怎样做我们何尝不是茫茫人海中的一员,迷茫着,追求着天天敲着java代码能怎样,明天如何不要问明天会怎样,明天怎样都是你今天和明天的选择好啦,不扯了,大家如果想听我扯,可以访问我的 ...
java websocket 上传大文件,使用java websocket API和Javascript上传文件
我正在学习websocket并且已经使用websocket / json完成了聊天程序.但我坚持上传ATM的文件.任何建议&回答会很感激. 服务器端: package websocket; i ...
如何在Spring-Boot项目中配置资源文件夹？视频文件不想放在项目中，怎么做？前台上传文件后台如何访问？什么是资源文件夹？
如何在Spring-boot项目配置资源文件夹前言 2.properties文件二.访问 1.放入资源 2.访问方式1 方式2 前言在什么情况下需要配置资源文件夹? 当项目需要读取静态文件夹以 ...
解决 springboot 上传头像后台接收 MultipartFile 为 null 问题
springboot 参数上传需要加注解类型识别错误示范(该方式获取 MultipartFile 为null ): @ApiOperation(value = "设置用户头像" ...

javascript上传文件后台接收

javascript上传文件后台接收相关推荐

最新文章

热门文章