ajaxfileupload.js实现上传文件功能

使用ajaxfileupload.js实现上传文件功能

一、ajaxFileUpload是一个异步上传文件的jQuery插语法:$.ajaxFileUpload([options])

options参数说明:

1、url           上传处理程序地址
2、fileElementId      文件选择框的id属性,即的id
3、secureuri        是否启用安全提交,默认为false
4、dataType        服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断
5、success        服务器响应成功后的处理函数 ,参数data就是服务器返回的数据
6、error          服务器响应失败后的处理函数
7、data           自定义参数,当有数据要和上传的文件一起传到后台处理的时候会用到。这里注意,数据格式比较严格{param:[{‘param1':'value1','param2':'value2' },{‘param1':'value3','param2':'value4' }]}, 其中单引号不能改为双引号
8、type           提交数据的方式,一般为post

二、使用方法

第一步、先引入jquery和ajaxFileUpload插件,注意先后顺序:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src= "js/ajaxfileupload.js" ></script>

第二步、html代码

原始的,控件展示效果如下:

因为原始控件的样式无法改变,所以我们一般会让这个标签隐藏,然后点击别的标签来触发上传控件。

<input type ="file" id="ImportPicInput" name= "myfile" style=" display: none" />
<div class ="input-append">
<label for ="importPicName"> 上传原始图片:</label >
<input type ="text" class="input-large" id= "importPicName" />
<a class ="btn btn-default" onclick= "$('#ImportPicInput').click();" > 打开</a>
</div > 

展现的页面效果:

第三步、js代码

在用户选择完上传图片后,需要把图片名称显示到输入框中,还需要在js文件中加入代码:

$(document).ready(function(e) {
  $('body').on('change',$('#ImportPicInput'),function(){
   $( "#importPicName").val($( "#ImportPicInput").val());
  });
});

上传文件的js代码:

$.ajaxFileUpload({
 type: "POST",
 url: "/toolkit/importPicFile.do",
 data:{picParams:text},//要传到后台的参数,没有可以不写
 secureuri : false,//是否启用安全提交,默认为false
 fileElementId:'ImportPicInput',//文件选择框的id属性
 dataType: 'json',//服务器返回的格式
 async : false,
 success: function(data){
  if(data.result=='success'){
   //coding
  }else{
   //coding
  }
 },
 error: function (data, status, e){
  /coding
 }
});

第四步、java代码

@RequestMapping(value="/importPicFile.do" ,produces="text/html;charset=utf-8" )
 public @ResponseBody String importPicFile1(@RequestParam("picParams") String picParams,
@RequestParam MultipartFile myfile,HttpServletRequest request){ 

   Map<String,Object> map= new HashMap<String,Object>();
    if(myfile.isEmpty()){
     map.put( "result", "error");
     map.put( "msg", "上传文件不能为空" );
   } else{
     String originalFilename=myfile.getOriginalFilename();
     String fileBaseName=FilenameUtils.getBaseName(originalFilename);
     String floderName=fileBaseName+"_" +DateUtil.getNowTimeData();
     try{ 

      String genePicPath=request.getSession().getServletContext().getRealPath("/upload/" +floderName);
       //把上传的图片放到服务器的文件夹下
      FileUtils. copyInputStreamToFile(myfile.getInputStream(), new File(genePicPath,originalFilename));
       //coding
      map.put( "result", "success"); 

     } catch (Exception e) {
      map.put( "result", "error");
      map.put( "msg",e.getMessage()); 

     }
   }
   String result=String. valueOf(JSONObject.fromObject (map));
    return result;
  }

三、注意点

(1)上文html中控件的css样式,都是用的bootstrap框架里的基本样式,也可以不用使用bootstrap框架,仅做参考。
(2)之前用的live方法,前台js报错说找不到这个方法,后来查了资料才发现,1.9以上的jquery版本已经废弃live这个方法了

$(document).ready(function(e) {
 $('#ImportPicInput ').live( 'change', function(){ 

  })
});

(3)文件选择框必须要有name,即,且java代码中的变量要跟name的值保持一致,即@RequestParam MultipartFile myfile,这点非常的重要。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JQuery插件ajaxfileupload.js异步上传文件实例

    在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: 复制代码 代码如下: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script

  • 使用ajaxfileupload.js实现上传文件功能

    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问题可以查看. 首先就是引入js和ajaxfileupload的文件,这个不需要多说. 然后就是ajax请求后台地址.代码如下: <div class="btn-file-box pos-rel"> <input type="file" id="

  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

    jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr

  • AjaxFileUpload.js实现异步上传文件功能

    做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax: 得到file的val,再post过去- 等真正实现的时候才发现,根本行不通. 于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件. AjaxFileUpload 这个插件的原理是创建隐藏的表单和iframe,然后用JS去提交,获得返回值. 语法 $.ajaxFileUpload([options]) 参数说明 url 上传处理程序地址. fileElementId 需要上传的文件域的ID,即的ID. secureur

  • 使用ajaxfileupload.js实现ajax上传文件php版

    无论是PHP,还是其他的服务端脚本都提供了文件上传功能,实现起来也比较简单.而利用JavaScript来配合,即可实现Ajax方式的文件上传.虽然jQuery本身没有提供这样的简化函数,但有不少插件可以实现.其中,Phpletter.com提供的ajaxfileupload.js是一个轻量的插件,而且编写方式与jQuery提供的全局方法$.post()非常相似,简单易用. 不过,该插件实在太简化了,除了可提供需上传文件的路径外,也就不能传递额外的值到后台服务端.所以,我修改了一下该脚本,增加个一

  • jQuery插件ajaxfileupload.js实现上传文件

    AjaxUpLoad.js的使用实现无刷新文件上传,如图 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden" id="hidFileNam

  • ajaxfileupload.js实现上传文件功能

    使用ajaxfileupload.js实现上传文件功能 一.ajaxFileUpload是一个异步上传文件的jQuery插语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址 2.fileElementId 文件选择框的id属性,即的id 3.secureuri 是否启用安全提交,默认为false 4.dataType 服务器返回的数据类型.可以为xml,script,json,html.如果不填写,jQuery会自动判断 5.su

  • node.js实现上传文件功能

    最近刚开始弄nond,写得不好见谅,有什么错误请指出: 首先安装node,安装步骤 这里以上传图片为例: 1.在该文件夹下生成package.json文件: 在本文件夹下打开命令行窗口(window系统,进入该文件夹按住shift然后点击鼠标右键,就可以直接选择在本文件夹中打开命令行窗口)输入:npm init 然后等有提示出来,一路Enter(懂的请无视,不懂且不想懂的一路Enter就是了),然后你就可以发现文件夹下有一个package.json文件,下面是刚生成的package.json文件

  • 简单实现js上传文件功能

    本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下 一.用input完成上传,效果图如 选择文件后,提交后出现图片url 二.传输格式采用form-data形式. html代码 <form id="upload" enctype="multipart/form-data" method="post"> <input type="file" name="file"

  • Node.js上传文件功能之服务端如何获取文件上传进度

    内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件上传进度的方法?>.稍微回答了下,这里顺便整理出来,有同样疑问的同学可以参考. 下文主要介绍如何利用progress-stream获取文件上传进度,以及该组件使用过程中的注意事项. 利用progress-stream获取文件上传进度 如果只是想在服务端获取上传进度,可以试下如下代码.注意,这个模块跟Ex

  • 使用WebUploader实现分片断点上传文件功能(二)

    写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本上后台处理数据都是用的Servlet,或者是SpringMVC,由于最近的项目一直都是Struts2,所以这里就用Struts2中的action来对数据进行处理,达到分片上传文件的效果. 1.什么是分片上传? 顾名思义,就是把文件分成一片片,即让一个文件,分割成好几个小文件,然后再上传.这样做的好处

  • 使用WebUploader实现上传文件功能(一)

    写在前面: 文件上传方式很多的,对于大文件的上传,在本次项目中也有涉及,主要是用了分片断点上传大文件.所以就去了解了一下WebUploader,先从简单的上传文件开始吧. 在代码中写注释,这样看的比较好点,那就直接上代码来看了解实现的过程吧. 前台jsp页面: <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String scheme = request.ge

  • PHP使用HTML5 FileApi实现Ajax上传文件功能示例

    本文实例讲述了PHP使用HTML5 FileApi实现Ajax上传文件功能.分享给大家供大家参考,具体如下: FileApi是HTML5的一个新特性,有了这个新特性,js就可以读取本地的文件了,然后实现真正的Ajax上传文件了,而不是iframe方法,下面会介绍api的使用,以及实现Ajax上传文件: FileApi使用 定义上传控件: <input type="file" name="pic" onchange="selfile();"

随机推荐