分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

web前端图片上传(2)

发布时间:2023-09-06 02:21责任编辑:郭大石关键词:前端

  今天发现了一种ajax上传图片的方式,是以前没有用过的,首先来说下为什么要用这种方式。是因为原来后台是用的form表单的方式来提交表单数据的。但是觉得呢,这种方式不太好,因为要刷新页面,所以我们就改成了ajax的方式,结果后台老哥说,前端改改就行了,后端不用改。然后我去找到了这种提交表单的方式。废话不多说,直接看代码。

 1 var formData = new FormData(); 2 ????????????????????formData.append("file", document.getElementById("file").files[0]);//这里是一个图片的input框,id为file。appen的第一个参数,是后台的传输的字段 3 ????????????????????formData.append("reward_name", reward_name); 4 ????????????????????formData.append("reward_id", reward_id); 5 ????????????????????formData.append("reward_num", reward_num); 6 ????????????????????formData.append("exchange_num", exchange_num); 7 ????????????????????$.ajax({ 8 ????????????????????????url:"__ROOT__/index.php/Administration/Gamemanage/add_icon", 9 ????????????????????????type:"post",10 ????????????????????????processData:false, //这里需要注意,一定要写false,因为有图片,所以不需要序列化11 ????????????????????????contentType:false, //这里也是一个需要注意的点。也要写false12 ????????????????????????data:formData,13 ????????????????????????dataType:‘json‘,14 ????????????????????????success:function(data){15 ????????????????????????????if(data.info=="添加成功"){16 ????????????????????????????????alert(data.info);17 ????????????????????????????????window.reload();18 ????????????????????????????}else{19 ????????????????????????????????alert(data.info);20 ????????????????????????????}21 ????????????????????????}22 ????????????????????});

  这种方法和我上次写的那个是不一样的,这次的方法是直接提交一个文件。附上上一篇的链接。这种事ajax传输base64图片的方式。两种方式,看后台怎么选择。

web前端图片上传(2)

原文地址:https://www.cnblogs.com/daniao11417/p/9916932.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved