大多上传文件的时候，都是使用表单的方式进行提交的。

使用form表单上传文件，也有很多种方式：

1、界面上直接使用submit按钮提交。这种方式可以实现效果但是没有success事件。即，可以上传文件，但是没有反馈信息。
2、使用jquery的form方法提交表单，这种提交方式，可以对表单指定 onSubmit、success、error事件。这种方式会更加友好一些。

问题原因：通常使用Jquery就可以实现文件的上传。

因为最近我们系统中的一些原因，导致Jquery的$与前台架构bootstrap上的$有冲突，所以如果使用前台框架之后，Jquery的$里面没有form方法。这就有些麻烦了。
如果是用上面第一种方式提交文件的话，那么的确可以，就是不太友好。

所以为了解决上述遇到的问题，可以有两种解决方案:
1、解决冲突，毕竟JQuery和前台框架都不可少的。
2、重新寻找上传表单的方法。

经过查找决定使用ajax进行文件的上传。网上一搜，找到了一个插件，使用ajaxFileupload方法提交。

接下来看一个实例，简单实现文件的上传。

示例

前台：

<script type="text/javascript">/*** 上传文件（step.js中需要用的方法）* @param formTag*/function uploadFile(){$.ajaxFileUpload({ method:"POST",url:ctx+"/leadtoQuestionTypes/ImportMongoMedia",            //需要链接到服务器地址  secureuri:true,  fileElementId:'fileName',                        //文件选择框的id属性 data:$('#picForm').serialize(),success: function(data,s, status){ //上传成功之后的操作},error: function (data, status, e){ //上传失败之后的操作}  });}
</script><form method="post" enctype="multipart/form-data">          <input type="file" id="fileName" name="fileName"  style="display:-webkit-inline-box;width: 180px;"/><input type="button" style="width:70px;" src="data:image/backGroup.png" onclick="uploadFile()" value="上传文件">
</form>

Controller(Spring MVC)

@RequestMapping("ImportMongoMedia")
public String ImportMongoMedia(@RequestParam(value = "fileName") MultipartFile file,HttpServletRequest request, HttpServletResponse response)throws UnsupportedEncodingException {MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;//获取上传的文件MultipartFile file1 = multipartRequest.getFile("fileName");//获取文件名String fileName = file.getOriginalFilename();//获取文件路径String logoRealPathDir = request.getSession().getServletContext().getRealPath(fileName);File localFile = new File(logoRealPathDir);try {file1.transferTo(localFile);} catch (IllegalStateException | IOException e) {e.printStackTrace();}String MediaID = UUID.randomUUID().toString();LinkedHashMap map = new LinkedHashMap();MongoUtil mongoUtil = new MongoUtil();mongoUtil.uploadFile(localFile, MediaID, dbName, collectionName, map);return MediaID;
}

controller获取文件之后，就可以调用后台上传的方法了。

虽然可以实现，但$冲突的问题还是需要解决。对于一种功能的实现，只有掌握多种实现方式，才能实现无困难编码，才能挑选高性能的方案。

ajax上传文件：ajaxSubmit使用相关推荐

ajax轮询 xml,闲话ajax，例ajax轮询，ajax上传文件
引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...
页面无刷新ajax上传文件--模拟iframe，超简单
前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...
上传html 0字节,HTML ajax 上传文件限制文件的类型和文件大小
html js function getFileType(filePath){ //获取文件的后缀名 var startIndex = filePath.lastIndexOf(".&quo ...
ajax上传文件获取失败,Ajax上传文件/照片时报错TypeError ：Illegal invocation的解决方法...
本篇文章给大家带来的内容是关于Ajax上传文件/照片时报错TypeError :Illegal invocation的解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 问题 A ...
php 通过ajax上传文件,php – 通过ajax上传文件
我使用2个文件index.js,upload.php尝试通过ajax上传文件(img),如果成功附加到div uploadfile_show. 但它不起作用,几乎没有问题,下面是我的代码有什么建议吗? ...
Django框架之 Form表单和Ajax上传文件
Django框架之 Form表单和Ajax上传文件浏览目录 Form表单上传文件 Ajax上传文件伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
php+ajax上传文件
直接上源代码 html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" > ...
ajax上传 java,javaWeb中使用ajax上传文件
javaWeb上传图片上传文件所必要的两个jar包:commons-fileupload.jar.commons-io.jar. 核心代码: String withPath = req.getSer ...
Ajax上传文件的cache、processdata、contentType属性以及FormData对象的总结
Ajax上传文件的cache.processdata.contentType属性以及FormData对象的总结前言:在之前的Ajax一次性上传多张图片并实现预览的博客中提到,如果要用 Ajax 上传 ...
ajax上传文件报错The current request is not a multipart request的解决办法
ajax上传文件报错The current request is not a multipart request的解决办法主要报错语句为: The current request is not a ...

ajax上传文件：ajaxSubmit使用

使用form表单上传文件，也有很多种方式：

问题原因：通常使用Jquery就可以实现文件的上传。

示例

前台：

Controller(Spring MVC)

ajax上传文件：ajaxSubmit使用相关推荐

最新文章

热门文章