分享web开发知识

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

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

ie8实现ajax无刷新文件上传

发布时间:2023-09-06 01:46责任编辑:苏小强关键词:文件上传

ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦。这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题。(最低兼容到ie6)

jQuery-File-Upload的github:https://github.com/blueimp/jQuery-File-Upload

这里简单介绍一下jQuery-File-Upload的使用。

使用jQuery-File-Upload的基本功能需要引入四个文件:

jquery、jquery.iframe-transport.js、jquery.ui.widget.js、jquery.fileupload.js。

示例:

<!DOCTYPE html><html><head> ???<title>title</title> ???<script src="/Scripts/jquery-1.10.2.js"></script> ???<script src="/Scripts/jquery.iframe-transport.js"></script> ???<script src="/Scripts/jquery.ui.widget.js"></script> ???<script src="/Scripts/jquery.fileupload.js"></script></head><body><div> ???<input id="fileupload" type="file" name="files" data-url="/home/upload" multiple></div><script> ???$(function() { ???????$(‘#fileupload‘).fileupload({ ???????????dataType: ‘json‘,/* ???????????done: function (e, data) { ???????????????$.each(data.result.files, function (index, file) { ???????????????????$(‘<p/>‘).text(file.name).appendTo(document.body); ???????????????}); ???????????}*/ ???????????success: function(result, textStatues) { ???????????????console.log(result, textStatues); ???????????}, ???????????progressall: function(e, data) { ???????????????var progress = (data.loaded / data.total).toFixed(2); ???????????????console.log(progress); ???????????} ???????}); ???});</script></body></html>

值得注意的是,success事件和done事件的触发条件都是后台返回字符串“true”,如果返回的不是字符串“true”就不会触发,而是触发complele事件。complete事件的用法和success以及done事件类似。

jQuery-File-Upload会把前端上传的多个文件拆分成多个请求,后台接收的时候要注意即使前端传来多个文件后台也只会收到单个文件而不是文件数组。

如果是ie8及以下使用的时候要注意后台收的到文件名是客户端的文件路径,需要再提取一次文件名。以asp.net后台为例:

 ???????[HttpPost] ???????public ActionResult Upload() ???????{ ???????????var httpFileCollectionBase = Request.Files; ???????????if (httpFileCollectionBase.Count == 0) ???????????{ ???????????????return Content("false"); ???????????} ???????????var file = httpFileCollectionBase.Get(0); ???????????string fullPath = Server.MapPath("/upload/"+ Path.GetFileName(file.FileName)); ???????????file.SaveAs(fullPath); ???????????return Content("true"); ???????}

ie8实现ajax无刷新文件上传

原文地址:https://www.cnblogs.com/axel10/p/8640740.html

知识推荐

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