首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

PHP -将文件名附加到FormData并在jQuery脚本中获取它

PHP是一种广泛应用于Web开发的服务器端脚本语言。它具有简单易学、开发效率高、跨平台等优势,被广泛应用于构建动态网站和Web应用程序。

在前端开发中,如果需要将文件名附加到FormData并在jQuery脚本中获取它,可以通过以下步骤实现:

  1. 在HTML页面中,创建一个包含文件上传功能的表单,并为文件输入框添加一个唯一的id属性,例如:
代码语言:txt
复制
<form id="myForm" enctype="multipart/form-data">
  <input type="file" id="myFile" name="myFile">
  <input type="submit" value="上传">
</form>
  1. 使用jQuery监听表单的提交事件,并在提交时获取文件名并附加到FormData中,例如:
代码语言:txt
复制
$(document).ready(function() {
  $('#myForm').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为

    var formData = new FormData();
    var file = $('#myFile')[0].files[0];
    var fileName = file.name;

    formData.append('myFile', file);
    formData.append('fileName', fileName);

    // 在这里可以将formData发送到服务器进行处理
  });
});

在上述代码中,通过$('#myFile')[0].files[0]获取文件输入框中选择的文件对象,然后使用file.name获取文件名,并将文件对象和文件名分别附加到FormData中。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,这里无法提供具体的链接。但腾讯云提供了丰富的云计算服务,包括云服务器、对象存储、数据库、人工智能等,可以根据具体需求选择相应的产品进行使用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ajax文件上传时:Formdata、File、Blob的关系

Formdata接口 “Formdata”接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的数据通过XMLHttpRequest.send() 方法发送出去。...方法、属性如下: FormData([Form])创建一个新的 FormData 对象,form这种方式创建的FormData对象会自动form的表单值也包含进去,包括文件内容也会被编码之后包含进去...FormData.set 会使用新值覆盖已有的值,而 append() 会把新值添加到已有值集合的后面。...FormData.get()返回在 FormData 对象与给定键关联的第一个值。 FormData.getAll()返回一个包含 FormData 对象与给定键关联的所有值的数组。...File对象、接口  File对象可以从Input元素的Files(Filelist对象)属性获取(如files[0]),可以用于FileReader对象在本地读取文件。

2.9K30

Typecho-Joe主题实现图片评论功能

实现效果 实际使用效果见本站,主题1.1.7版本后嵌入此功能,但是在开启前需要配置一些东西。...注意 因为解除了a标签后可以写入JS脚本语句,造成安全隐患,强烈建议开启主题设置里的禁止使用JS脚本评论。 3.图床API接口,推荐自己搭建。...图片 ---- 添加css文件 btn.css 美化上传和插入按钮,可根据喜好自己修改或者加入样式,创建好文件后复制下方代码粘贴保存即可,并在head.php或者header.php引入文件。...(); 方法添加需要的参数即可,修改好后,在footer.php引入文件,并且在的上方 axios.min.js 因为上传使用的是axios方式请求。...= new FormData(); var upfiles = $("#fileControl").get(0).files; formData.append("file",

1.1K20

前端如何上传文件

,然后原生按钮和自定义按钮设置相同的大小,然后原生按钮定位在自定义按钮之上,最后设置原生按钮的opacity为0即可。...点击按钮获取文件 第一种普通上传方式 $("#file-input").on("change", function() { console.log(`文件名称:${e.target.value}...(); formData.append("iFile", this.files[0]); // ajax上传到服务器代码略... }); // 后面再次获取到这个formData...通过实例化一个FileReader,调的readAsDataURL并把File对象传给它,监听的onload事件,load完读取的结果就在的result属性里了。)...,最后得到: FormData格式 FileReader读取得到的base64二进制格式 如果不使用jQuery,没有问题,直接使用ajax发送就好;如果使用jQuery,要设置两个属性为false,

1.8K10

前端处理图片上传的几种方式

在用html5实现图片预览功能这篇文章只是介绍了图片上传过程预览的实现,那关于图片上传有哪几种方式呢? 最常见的一种就是用表单方式上传,在表单增加一个input标签,type属性为file。...但是表单上传有个缺点,那就是上传完成后页面会发生跳转,不想发生跳转的话就要用到ajax上传,这里有个坑,我们在上传文本字符串时,通常会直接获取input标签的vlaue值,那大家猜一猜如果我们获取上面代码...()方法转换成字符串类型,FormData 对象的字段类型可以是 File, 或者 string,如果的字段类型不是File,则会被转换成字符串类型。...(fd); }); // 原生js实现,直接原生jsform表单元素塞进ForData构造函数;此处也不需要设置enctype=multipart/form-data;用formdata构造数据不需要表单的.../form-data;甚至form表单元素都是多余的;文件数据通过append塞入formdata里面和 enctype=multipart/form-data无关; 再看一下用jquery的ajax

4.9K61

Web文件上传方法总结大全

文件上传在WEB开发应用很广泛,我们经常发微博、发微信朋友圈都用到了图片上传功能。 文件上传是指本地图片、视频、音频等文件上传到服务器上,可以供其他用户浏览或下载的过程。...首先,截图粘贴上传的核心思想是,监听粘贴事件,然后获取剪切板的数据,如果是一张图片,则触发上传事件。...File API在HTML5规范只是草案,在 W3C 草案,File 对象只包含文件名、文件类型和文件大小等只读属性。...: 在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表,在jQuery是e.originalEvent.dataTransfer.files 拖拽上传仅支持图片,文件对象...将上传后的文件生成一个随机的文件名,并且加上此前生成的文件扩展名。 设置上传目录执行权限,避免不怀好意的人绕过如图片扩展名进行恶意攻击,拒绝脚本执行的可能性。

4.2K10

表单多文件上传样式美化 && 支持选中文件后删除相关项

并在新的元素显示出来 想着很简单,但随之而来的问题就是,如果选中的文件数量很多,新元素占空间的多少就是个问题,可以默认显示几个文件,再通过“查看更多文件”查看到更多的信息 随之另外的想法是,一次性选中的文件很多...脚本的处理 下面,着重介绍JS脚本的处理 要获取到选中文件的信息,自然想到用value属性,但通过文件项的value只能获取到一个文件路径(第一个),无论有没有multiple 无multiple <input...2)FormData HTML5引入了表单的新对象FormData, 它可以生成一个表单对象,我们可以向其中获取/设置键值对信息,再一并提交给后台 引用MDN的FormData使用方法,我们可以添加各种类型的数据...告诉jQuery不要去设置Content-Type请求头 }); 这里有几个要注意的点: 1)FormData的属性值接受的是单个文件信息,不能是复合性的对象。...append进去的项 4)不要直接在JQ的ajax实例化出一个FormData对象,会出问题 ?

4K10

手把手教你前端本地文件操作与上传

通过判断文件名的后缀可能会不准,而通过这种判断会比较准。...上面的代码使用了一个正则判断,如果是一张图片的话就把赋值给img的src,并添加到dom里面,但其实这段代码有点问题,就是web不是所有的图片都能通过img标签展示出来,通常是jpg/png/gif这三种...); 如果用jQuery的话,要设置两个属性为false: $.ajax({ url:"/upload", type:"POST", data:formData, processData:false,/.../ 不处理数据 contentType:false// 不设置内容类型 }); 因为jQuery会自动把内容做一些转义,并且根据data自动设置请求mime类型,这里告诉jQuery直接用xhr.send...得到的File对象就可以直接添加到FormData里面,如果需要先读取base64格式做处理的,那么可以把处理后的base64转化为blob数据再append到formData里面。

1.8K110

前端本地文件操作与上传

它是一个window.File的实例,包含了文件的修改时间、文件名、文件的大小、文件的mime类型等。...通过判断文件名的后缀可能会不准,而通过这种判断会比较准。...上面的代码使用了一个正则判断,如果是一张图片的话就把赋值给img的src,并添加到dom里面,但其实这段代码有点问题,就是web不是所有的图片都能通过img标签展示出来,通常是jpg/png/gif这三种...); 如果用jQuery的话,要设置两个属性为false: $.ajax({ url: "/upload", type: "POST", data: formData, processData:...得到的File对象就可以直接添加到FormData里面,如果需要先读取base64格式做处理的,那么可以把处理后的base64转化为blob数据再append到formData里面。

1.5K20

.Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

这篇文章,我将要描述的是在我们.Net如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存,并返回保存的图片路径展示出图片,实现一个无刷新的异步图片上传的过程,当然这里我讲解的是单张图片的保存过程...,对于多图片上传的话其实我们只需要在type='file'文本框中加上一个multiple可多选,然后获取input的文件数组遍历向后台提交感兴趣的话可以尝试,不过下一篇博客将会讲解如何使用Layui...FormData对象概述:   FormData对象是H5的一个新特性,用以数据编译成键值对,以便用XMLHttpRequest来发送数据。...--点击上传按钮后,图片缩略图以上级背景图片显示--> JqueryFormData二进制文件对象拼接和提交: //用户头像修改.../form-data,图片媒体文件) //获取input的文件列表信息 var files = $(obj).prop("files"); //拼接图片文件流信息 console.log(files

2K20

【通信】前端的几类数据交互方式

jsonp都是对Form的模拟 action : 提交到哪 method: GET/POST/PUT/DELETE/HEAD GET:把数据放在url里面传输 ,数据量很小,会缓存(主要便于获取...,下次获取时就更快),看得见 POST: 放在Body里 , 数据量大,不会缓存 ,看不见 DELETE:删除 PUT:发送 HEAD:让服务器只发送头回来就行(不需要内容),form...var xhr = new XMLHttpRequest(); xhr.open('post','1.php',false); xhr.send...的jsonp功能 注意:jQuery的jsonp不是Ajax $(function(){ $.ajax({ url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy...拷贝到服务器 ,只需拷贝package.json 然后再服务端只需npm i,就会下载需要的包 npm i XXX -D安装xxx需要依赖的包 “devDependencies” "scripts"可以写脚本

23910

js -- fileData 实现文件断点续传 前端实现文件的断点续传

所以断点续传的最基本实现也就是:前端通过FileList对象获取到相应的文件,按照指定的分割方式大文件分段,然后一段一段地传给后端,后端再按顺序一段段文件进行拼接。...replace('{{uploadVal}}', uploadVal) ); 不过,在显示文件信息的时候,可能这个文件之前之前已经上传过了,为了断点续传,需要判断并在界面上做出提示...这是完整的JS逻辑,代码有点儿注释了应该不难看懂吧哈哈 <script...后端实现 这里的后端实现还是比较简单的,主要用依赖了 file_put_contents、file_get_contents 这两个方法 要注意一下,通过FormData对象上传的文件对象,在PHP也是通过...$_FILES全局对象获取的,还有为了避免上传后文件中文的乱码,用一下iconv 断点续传支持文件的覆盖,所以如果已经存在完整的文件,就将其删除 // 如果第一次上传的时候,该文件已经存在,则删除文件重新上传

3.3K31
领券