ajaxFileUpload上传带参数文件及JS验证文件大小

本代码片段用于spring boot+hibernate,用maven构建一:ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单 再将要上传的文件写上去再提交.但是原代码 却没有处理data.所以这块内容需要我们自己加上去.
下面红色部分为修改ajaxFileUpload.js的三处地方:(对比源码修改)
1.createUploadForm: function(id, fileElementId,data);
2.if (data) {
        for (var i in data) {
            $(‘<input type="hidden" name="‘ + i + ‘" value="‘ + data[i] + ‘" />‘).appendTo(form);
        }
    }
3.var form = jQuery.createUploadForm(id, s.fileElementId,s.data);html部分:<form id="form1" runat="server" method="post" enctype="multipart/form-data"> <div> <div class="_box">选择图片</div> </div> <div class="none"> <input type="file" name="fileID" id="fileID" /> 
</div> </form> 二:

$.ajaxFileUpload({
                    url: ‘URL‘,
                    type: ‘post‘,
                    data : {
                        url : url
                    },
                    secureuri: false, //一般设置为false
                    fileElementId: ‘fileID‘, // 上传文件的id、name属性名
                    dataType: ‘JSON‘, //返回值类型,一般设置为json、application/json  这里要用大写  不然会取不到返回的数据
                    success: function(data, status){
                        alert(data);
                    },
                    error: function(data, status, e){
                        alert(e);
                    }
                });三:后台读取并保存到文件夹中 //保存目录为 E:\saveIMG

@ResponseBody
@RequestMapping("/addandupload")
public String addandupload(@RequestParam(value="uploadIMG", required=false) MultipartFile file) {
  String filename = file.getOriginalFilename();
  String filepath = "E:\\saveIMG\\"; //文件上传保存目录
  if (!file.isEmpty()) {  //判断是否有文件上传
  try {
    byte[] bytes = file.getBytes();
    BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(new File(filepath, filename)));
    stream.write(bytes);
    stream.close();
  } catch (Exception e) {
    e.printStackTrace();
  }

}

页面显示多个服务器图片:

一:

HTML页面的IMG标签中的src用

<img class="example-image" src="*{‘http://127.0.0.1:8080/foodmain/findimg?name=‘+food.foodimg}"  alt="${food.foodname}" />

后端http://127.0.0.1:8080/foodmain/findimg?name?方法

@ResponseBody
@RequestMapping("/findimg")
public void findimg(HttpServletResponse response,String name) throws IOException{
File filePic = new File("E:\\saveIMG\\"+name);
  if(filePic.exists()){
    FileInputStream is = new FileInputStream(filePic);
    int i = is.available(); // 得到文件大小
    byte data[] = new byte[i];
    is.read(data); // 读数据
    is.close();
    response.setContentType("image/*"); // 设置返回的文件类型
    OutputStream toClient = response.getOutputStream(); // 得到向客户端输出二进制数据的对象
    toClient.write(data); // 输出数据
    toClient.close();
  }
}

JS验证上传文件大小,参考:http://zhuchengzzcc.iteye.com/blog/1573360

时间: 2024-10-11 20:50:23

ajaxFileUpload上传带参数文件及JS验证文件大小的相关文章

文件上传漏洞演示脚本之js验证

文件上传漏洞演示脚本之js验证 0 0 716 关于文件上传漏洞,想必玩web安全的同学们都有接触,之前本站也发布过一篇文章介绍文件上传漏洞的各种绕过方法,但是只是有文档却没有演示代码,最近给公司一客户培训,就照文档中的绕过写出了相应的代码,方便我等小菜研究,此次的文章我会连续发几天都是关于如何绕过的,全都是科普文,很简单的,希望小伙伴们喜欢. 关于文件上传漏洞的文章 绕过文件上传验证 为什么文件上传表单是主要的安全威胁 js验证绕过演示代码 01 <?php 02 /** 03  * Crea

论httpclient上传带参数【commons-httpclient和apache httpclient区别】

需要做一个httpclient上传,然后啪啪啪网上找资料 1.首先以前系统中用到的了commons-httpclient上传,找了资料后一顿乱改,然后测试 PostMethod filePost = new PostMethod(url); filePost.setParameter("system", "vinuxpost"); try { Part part[] = UploadRequestHelper.getPart(request); filePost.s

js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中

ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '&qu

SpringMVC使用MultipartFile文件上传,多文件上传,带参数上传

一.配置SpringMVC 在spring.xml中配置: <!-- springmvc文件上传需要配置的节点--> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="-1&

android使用HttpURLConnection实现带参数文件上传

文件上传是常见功能,然而android网上大多数的文件上传都使用httpclient,而且需要添加一个httpmine-jar,其实HttpURLConnection也可以实现文件上传,但是它在移动端有个弊端,就是不能上传大文件,所以这次说的方式,只能上传一些较小的文件. 文件上传,并且带上一些参数,这需要我们了解http请求的构造方式,也就是它的格式. HttpURLConnection需要我们自己构造请求头部,也就是我们要拼接出一个正确完整的请求. 下面来看一个典型的例子 POST /api

atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传,避免一次使用内存使用过大的 2 2. Uuid还是原来文件名称:: 2 3. 监听器频繁地被调用 2 4. 结合wz easyui 2 4. 选型 2 5. Uploadify::yash js+flash 3 6. commons-fileupload:: 3 7. COS这个工具O'Reilly公司 3 8. 大的文件上传组件总结 3 5. 林吧实现ui Ajax+jq

大数据技术之_18_大数据离线平台_02_Nginx+Mysql+数据收集+Web 工程 JS/JAVA SDK 讲解+Flume 故障后-如何手动上传 Nginx 日志文件至 HDFS 上

十一.Nginx11.1.介绍11.2.常见其他 Web 服务器11.3.版本11.4.Nginx 安装11.5.目录结构11.6.操作命令十二.Mysql12.1.介绍12.2.关系型数据库(SQL)种类12.3.特征12.4.术语12.4.与非关系型数据库比较(Not Only SQL)12.4.1.种类12.4.2.特征12.4.3.总结十三.数据收集13.1.收集方式13.2.数据的事件类型13.2.1.Launch 事件13.2.2.PageView 事件13.3.Nginx 日志收集

jquery的uploadify插件多文件上传配置参数详解

最近做了个多文件上传,需要限制上传文件类型的例子.以前没做过找了一些资料,下次有用.同时也给大家做参考. uploader: uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf. script: 后台处理程序的相对路径 .默认值:uploadify.php checkScript:用来判断上传选择的文 件在服务器是否存在的后台处理程序的相对路径 fileDataName:设置一个名字,在服务器处理

ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)

上篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但只是固定的文件个数,如果需求不确定是多少文件 则我们就需要动态的添加文件上传框,以实现灵活性. 基于上篇基本框架是不变的,主要修改以下几个方面 1.jQuery实现动态添加删除文件上传框 2.获取文件上传框的ID 3.ajaxfileupload.js里将ID数组转换为需要的Object数组 依次解决上面问题 一.实现动