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

页面代码:

 
<html>
    <!-- 引入相关的js文件,相对路径  -->
    <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript" src="js/ajaxfileupload.js"></script>
    <!-- 执行上传文件操作的函数 -->
      <script type="text/javascript">
          function ajaxFileUpload(){
               $.ajaxFileUpload(
                   {
                url:‘update.do?method=uploader‘,            //需要链接到服务器地址
                secureuri:false,
                fileElementId:‘houseMaps‘,                        //文件选择框的id属性
                dataType: ‘xml‘,                                     //服务器返回的格式,可以是json
                success: function (data, status)            //相当于java中try语句块的用法
                {      
                    $(‘#result‘).html(‘添加成功‘);
                },
                error: function (data, status, e)            //相当于java中catch语句块的用法
                {
                    $(‘#result‘).html(‘添加失败‘);
                }
            }
                   
               );
              
          }
      </script>
  </head>
  
  <body>
      <form method="post" action="update.do?method=uploader" enctype="multipart/form-data">  
        <input type="file" id="houseMaps" name="houseMaps"/> 
        <input type="button" value="提交" onclick="ajaxFileUpload()"/>
    </form> 
    <div id="result"></div>
    
  </body>
</html>

服务器代码:

 public class UpdateAction extends DispatchAction {
    public ActionForward uploader(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) {
        UpFormForm upFormForm = (UpFormForm) form;
        FormFile ff = upFormForm.getHouseMaps();
        try {
            InputStream is = ff.getInputStream();
            File file = new File("D:/" + ff.getFileName());            //指定文件存储的路径和文件名
            OutputStream os = new FileOutputStream(file);
            
            byte[] b = new byte[1024];
            int len = 0;
            while((len = is.read(b)) != -1){
                os.write(b, 0, len);
            }
            os.close();
            is.close();
        } catch (Exception e) {
            e.printStackTrace();
            
        }
        
        return null;
    }
}

注解:服务器代码可以是之前Struts实现的文件上传中的Action中的方法;

主要就是Ajax上传文件的方法;需指明以下内容:

url:‘‘;         //需要链接到服务器地址
  fileElementId:‘‘,  //文件选择框的id属性

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

时间: 2024-12-26 08:16:39

一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子的相关文章

转:一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子

页面代码: <html>    <!-- 引入相关的js文件,相对路径  -->    <script type="text/javascript" src="js/jquery.js"></script>      <script type="text/javascript" src="js/ajaxfileupload.js"></script> &l

使用jquery插件ajaxfileupload一次上传多个文件,示例

@{ ViewBag.Title = "Index"; Layout = ""; } <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="/jquery-1.7.1.js

ajaxfileupload.js ajax上传文件(含application/json)

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

jquery.form.js使用AJAX上传文件

$("#fileUploadForm").ajaxSubmit({ url: "img.ashx", type: "post", success: function (data) { } }) url接受图片的地址 type:提交方式 Success ajax异步成功后返回数据 在fileUploadForm表单中包含 <input type="text" name="UserInfo" />

jQuery插件AjaxFileUpload实现ajax文件上传时老是执行error方法 问题原因

今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是执行error,无法执行succes方法,追踪ajaxfileupload.js源码发现: 当执行if(type=="json")    eval("data = "+data);会抛出异常,导致在处理异常的时候将status = "error" 因此一直执行error方法. 上网查询,得知eval函数是用来执行一段js代码,而并不是如我所想的反

图片延迟加载并等比缩放,一个简单的JQuery插件

使用方法: $(".viewArea img").zoom({height:74,width:103}); (function($){    $.fn.zoom = function(settings){                //一些默认配置:                settings = $.extend({                    height:0,                    width:0,                    load

编写一个简单的Jquery插件

1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var methods = { //Object showName: function (name) { alert('Name:' + name); }, showAge: function (age) { alert('Age' + age); } }; //method方法名 $.fn.showplugi

ajax上传文件 基于jquery form表单上传文件

<script src="/static/js/jquery.js"></script><script> $("#reg-btn").click(function () { // 1. 取到用户填写的数据 var form_data_obj = new FormData(); form_data_obj.append('username',$('#id_username').val()); form_data_obj.append

flask jQuery ajax 上传文件

1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > <div> <input type="file" name="file" value="" style="color: white"> <input type="button"