jquery升级后,上传的文件无效

jquery升级后,上传的文件无效,第1张

升级后文件类型不匹配稿锋,无法上传

在 IE8/9 中使用 JQuery 上传只能使用 Form 的方式。

使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性山判,IE8/9 不支持)

使用 JQuery Form 上传,contentType 只能为 text/html,因为如果是 application/json 类型逗敬改,IE8/9 会以文件下载的方式展现 json 数据。

楼主你好!根据你的描述,让我来给你回答!

var fd = new FormData(document.getElementById("fileinfo"))

fd.append("CustomField", "This is some extra data"携没)

$.ajax({

url: "stash.php",

type: "POST",

data: fd,

processData: false, // tell jQuery not to process the data

contentType: false // tell jQuery not to set contentType

})

希望能帮到你,如辩陆纳果满意悉派,请记得采纳哦~~~

ajax的表单提交只能提交data数据到后台,没法实现file文件的上传还有展示进度功能,这里用到form.js的插件来实现,搭配css样式简单易上手,而且高大上,推荐使用。

需要解释下我的结构, #upload-input-file 的input标签是真实的文件上传按钮,包裹form标签后可以实现上传功能, #upload-input-btn 的button标签是展示给用户的按钮,因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面, .progress 是进度条的位置,先让他隐藏加上 hidden 的class, .progress-bar 是进度条的主体, .progress-bar-status 是进度条的文本提醒。

去掉hidden的class,看到的效果是这样的

[图片上传失败...(image-2c700a-1548557865446)]

将上传事件绑定在file的input里面,绑定方式就随意了。

var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'//上传步骤 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden")progress.width(percentVal)status.html(percentVal)}, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '盯州%'progress.width(percentVal)status.html(percentVal)console.log(percentVal, position, total)}, success: function (result) { percentVal = '100%'链则旁progress.width(percentVal)status.html(percentVal)//获取上传文件信息 uploadFileResult.push(result)// console.log(uploadFileResult)$("棚橡.upload-file-result").html(result.name)$("#upload-input-file").val('')}, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown)$(".upload-file-result").empty()} })

[图片上传失败...(image-3d6ae0-1548557865446)]

[图片上传失败...(image-9f0adf-1548557865446)]

更多用法可以 参考官网


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/tougao/12248652.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-22
下一篇 2023-05-22

发表评论

登录后才能评论

评论列表(0条)

保存