精华内容
下载资源
问答
  • ajax上传文件

    千次阅读 2013-11-11 17:16:11
    我做了一个校验 ,想用ajax进行文件的验证,这时候就需要使用ajax上传文件进行验证   首先需要 一个js包  jquery 和 ajaxfileupload.js ajaxfileupload 下载地址 :   使用方法: 前台js $("#submitbtn")....

    一般的时候都是用的struts提交表单进行文件上传

    我做了一个校验 ,想用ajax进行文件的验证,这时候就需要使用ajax上传文件进行验证

     

    首先需要 一个js包

     jquery  和  ajaxfileupload.js

    ajaxfileupload 下载地址 :点击打开链接

     

    使用方法:

    前台js

    $("#submitbtn").click(function(){
    		$("#dmIfSubmit").attr("value" ,"1");
    		$.ajaxFileUpload({
      			    url:'${base}/qiye/direcapply!checkFile.action',       //后台需要走的action
                    secureuri:false,
                    fileElementId:'files',                            //文件选择框的id属性
                     success: function (data, textStatus) {               //相当于java中try语句块的用法
                      alert( data.activeElement.innerHTML);
                        alert("上传图片成功!");
                       
                    },
                    error: function (data, status, e) {           //相当于java中catch语句块的用法
                       
                    }
    
    		});
    		
    	});


     

    后台代码

    public String checkFile() throws IOException{
    		msg="";
    		if(null == files){
    			/**若文件为空返回""**/
    			msg= "宣传材料不能为空";
    		}else{
    			// 判断数据是否正确
    			// 文件后缀名
    			int index = StringUtils.lastIndexOf(filesFileName, '.');
    			if (index == -1) {
    				msg= "文件类型错误!";
    			}
    			/**获取文件后缀名**/
    			String extFileName = StringUtils.substring(filesFileName, index + 1);
    			String forbitName = "doc-docx";
    			String[] forbitNames = forbitName.split("-");
    			for(int i= 0 ;i<forbitNames.length ; i++){
    				 if(!extFileName.equalsIgnoreCase(forbitNames[i])){
    					 msg= "请上传正确的附件,附件不能类型不能为"+forbitNames[i];
    					 break;
    				 }
    			 }
    			
    		}
    		HttpServletResponse response = (HttpServletResponse)ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE); 
    		response.setHeader("content-type", "text/html;charset=utf-8");
    		 //获得输出流
            OutputStream out = response.getOutputStream();
            //编码   发送响应体
            out.write(msg.getBytes("utf-8"));
    		//response.getWriter().println(new String (msg.getBytes("ISO8859_1"), "utf-8"));
    		return null;
    	}


     

    这样就可以使用ajax 获取页面文件

     

     

    展开全文
  • ajax上传文件.txt

    2019-12-02 17:14:36
    这是本人自己做的js+ajax上传文件的代码,点击页面上的图片按钮,选择图片文件,就可直接上传,上传后的文件名称直接保存在隐藏域标签里,方便后台获取。
  • 答案:可以使用iframe模拟Ajax上传文件。接下来博主将使用iframe来模拟Ajax来上传文件。 首先看一下效果图: 文件结构图: 09-iframe-upload.html文件: 页面中有一个表单,表单中有一个上传文件按钮和提交按钮,...
  • html的ajax上传文件

    2017-06-22 14:23:37
    html的ajax上传文件

    html的ajax上传文件


          html中经常会有上传文件的功能。

          常见的实现方法有,form标题提交上传。 

           ajax上传。


        ajxa上传比form上传体验效果更好,扩展性更改,界面与逻辑耦合度低。



        实现思路:

        1、本地选择文件进

        2、本地文件选择成功后显示本地文件路径,

        3、获取本地文件的流,放入到formData中

        4、通过ajax将本地文件上传到服务器,服务器接收文件流,保存到本地,

        5、服务器保存成功则服务器将保存到本地的位置返回给前端,否则返回上传文件失败


      实现代码:

      upload.html:

      <div class="treamitem">
                            <label class="label" >战队图标:</label>
                            <input class="treamiteminput browsetreaminput" type="text" id="browsetreaminput"  readonly="readonly" />
                            <input class="hide" id=&
    展开全文
  • iframe模拟Ajax上传文件

    千次阅读 2016-10-11 20:45:19
    答案:可以使用iframe模拟Ajax上传文件。接下来博主将使用iframe来模拟Ajax来上传文件。首先看一下效果图: 文件结构图: 09-iframe-upload.html文件: 页面中有一个表单,表单中有一个上传文件按钮和提

    xmlhttprequest level 1中,Ajax是不能够上传文件的,因为js不能操作本地文件,但是市场上有一些Ajax异步上传文件的插件,是怎么完成的呢?答案:可以使用iframe模拟Ajax上传文件。接下来博主将使用iframe来模拟Ajax来上传文件。

    首先看一下效果图:
    这里写图片描述

    文件结构图:
    这里写图片描述

    09-iframe-upload.html文件:
    页面中有一个表单,表单中有一个上传文件按钮和提交按钮,点击提交按钮执行ajaxUpload函数,然后动态创建iframe标签,让其不可见,最后设置表单的target属性指向iframe。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>iframe模拟Ajax上传文件</title>
        <link rel="stylesheet" href="">
    </head>
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script>
        /**
         * 文件上传
         * @return bool 是否提交表单
         * 1、捕捉表单提交的动作
         * 2、动态创建iframe标签,然其不可见
         * 3、设置表单的target属性指向iframe
         */
        function ajaxUpload(){
            var iframeName = 'upload'+Math.random();//给iframe取名
            $('<iframe name='+iframeName+' width="0" height="0" frameborder="0"></iframe>').appendTo($('body'));//动态创建iframe
            $('form:first').attr('target',iframeName);//设置form的target属性
            $('#progress').html('<img src="progress.jpg"/>');//显示上传是否成功
            //return false;
        }
    </script>
    <body>
        <h1>iframe模拟Ajax上传文件</h1>
        <h2 id="progress"></h2>
        <form action="09-iframe-upload.php" method="post" enctype="multipart/form-data" onsubmit="return ajaxUpload();">
            <p><input type="file" name="pic"/></p>
            <p><input type="submit" value="提交" /></p>
        </form>
    </body>
    </html>

    09-iframe-upload.php文件:
    首先延时3秒,为了能看到加载的图片,然后判断是否有上传文件,然后返回一段Js代码,这段js是在页面中显示是否上传成功

    <?php
    /**
     * iframe模拟Ajax上传文件
     * @author webbc
     */
    sleep(3);//延时3秒
    if(empty($_FILES)){
        echo 'no file';
    }
    $error = $_FILES['pic']['error'] == 0?'succ':'fail';//判断上传是否成功
    echo "<script>parent.document.getElementById('progress').innerHTML='$error'</script>";//显示上传是否成功
    ?>
    展开全文
  • ajax上传文件的原理与实现

    千次阅读 2015-05-07 10:11:52
    ajax已经很普遍了,但使用 ajax上传文件自己却一直都没有涉及,我只知道挺复杂的,上传文件不同于上传一般的表单数据,必须特殊处理,知道一般ajax使用上传都是应用一个虚拟的iframe,但由于项目需要,在网上找了找...

        ajax已经很普遍了,但使用 ajax上传文件自己却一直都没有涉及,我只知道挺复杂的,上传文件不同于上传一般的表单数据,必须特殊处理,知道一般ajax使用上传都是应用一个虚拟的iframe,但由于项目需要,在网上找了找,没想到找到了两个支持ajax上传文件的jquery插件,jquery.uploadify.js和dropzone.min.js两个都可以实现ajax上传文件,效果也不错。


    1使用jquery.uploadify.js上传文件

     这种上传方式,使用了Flash,因此需要引用一个特殊的js文件swfobject.js,低版本的需要引用,高版本的这个文件已经包含在jquery.uploadify.js中了。另外低版本的参数和高版本的参数也不太一样了。

    使用Uploadify v3.2.1的完整前台代码

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="Styles/jquery.uploadify.js" type="text/javascript"></script>
        <link href="Styles/uploadify.css" rel="stylesheet" type="text/css" />
         <script type="text/javascript">
             $(document).ready(function () {
    
                 $("#uploadify").uploadify({
                     swf: 'Styles/uploadify.swf',
                     uploader: 'Handler1.ashx?OperationType=upfile',//后台的处理地址
                     fileTypeDesc: '请选择excel文件',
                     buttonText: '请选择excel文件',
                     fileTypeExts: '*.xls',
                     'auto': false,
                      onSelectError: function (file, errorCode, errorMsg) {
                         switch (errorCode) {
                             case -100:
                                 alert("上传的文件数量已经超出系统限制的" + $('#uploadify').uploadify('settings', 'queueSizeLimit') + "个文件!");
                                 break;
                             case -110:
                                 alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#uploadify').uploadify('settings', 'fileSizeLimit') + "大小!");
                                 break;
                             case -120:
                                 alert("文件 [" + file.name + "] 大小异常!");
                                 break;
                             case -130:
                                 alert("文件 [" + file.name + "] 类型不正确!");
                                 break;
                         }
                     },
                     onFallback: function () {
                         alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
                     },
                     //上传到服务器,服务器返回相应信息到data里  
                     onUploadSuccess: function (file, data, response) {
                         alert(data);
                     },
                     onSelect: function (fileObj) {
                         alert("文件名:" + fileObj.name + "\r\n" +
                      "文件大小:" + fileObj.size + "\r\n" +
                      "创建时间:" + fileObj.creationdate + "\r\n" +
                      "最后修改时间:" + fileObj.modificationdate + "\r\n" +
                      "文件类型:" + fileObj.type
                );
                     } 
                 });            
             });
             function doUplaod() {
                 $('#uploadify').uploadify('upload', '*');
             }
    
             function closeLoad() {
                 $('#uploadify').uploadify('cancel', '*');
             }
         </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
         <div>
         <div id="fileQueue"></div>
        <input type="file" name="uploadify" id="uploadify" />
        <p>
          <a href="javascript:doUplaod()">上传</a>| 
          <a href="javascript:closeLoad()">取消上传</a>
        </p>
        </div>
        </div>
        </form>
    </body>
    </html>
    


    Uploadify v2.1.0的写法

    由于没有swfobject.js,需要添加引用

        <script src="Scripts/swfobject.js" type="text/javascript"></script>
    另外部分参数也不一样,例如uploader,script

    完整的前台代码

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="Scripts/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
    
        <link href="Scripts/uploadify.css" rel="stylesheet" type="text/css" />
        <script src="Scripts/swfobject.js" type="text/javascript"></script>
        <script type="text/javascript">
    
            
                </script>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $("#uploadify").uploadify({
                            'uploader': 'Scripts/uploadify1.swf',
                            'script': 'Handler1.ashx?OperationType=upfile',
                            'cancelImg': 'Scripts/cancel.png',
                            'folder': 'UploadFile',
                            'queueID': 'fileQueue',
                            'auto': false,
                            'multi': false,
                          
                            'fileExt': '*.doc;*.xls',
                            'fileDesc': '请选择excel文件',
                            'onSelect': function (e, queueId, fileObj) {
                                alert("唯一标识:" + queueId + "\r\n" +
                      "文件名:" + fileObj.name + "\r\n" +
                      "文件大小:" + fileObj.size + "\r\n" +
                      "创建时间:" + fileObj.creationDate + "\r\n" +
                      "最后修改时间:" + fileObj.modificationDate + "\r\n" +
                      "文件类型:" + fileObj.type
                );
                            }
                        });
                    });  
                </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
         <div id="fileQueue"></div>
        <input type="file" name="uploadify" id="uploadify" />
        <p>
          <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| 
          <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
        </p>
        </div>
        </form>
    </body>
    </html>
    

    2使用dropzone.min.js上传文件

    没有使用Flash,但对浏览器要求比较高,例如IE10以上才支持,应该是使用了html5的技术

    完整的前端代码、

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="Scripts/dropzone.min.js" type="text/javascript"></script>
        <link href="Scripts/dropzone.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            jQuery(function ($) {
                Dropzone.autoDiscover = false;
                try {
                    var myDropzone = new Dropzone("#dropzone", {
                        paramName: "FileData", // The name that will be used to transfer the file
                        maxFilesize: 5, // MB
                        dictRemoveFile: '移除文件',
                        dictCancelUpload: '取消上传',
                        addRemoveLinks: true,
                        uploadMultiple: false,
                        acceptedFiles: '.xls',
                        autoProcessQueue: true,
                        dictRemoveFile: "关闭",
                        dictFileTooBig: '此文件过大',
                        dictCancelUploadConfirmation: '确定取消上传吗?',
                        dictInvalidInputType: "不支持此类型文件上传!",
                        parallelUploads: 1, //限制上传文件数
                        url: "Handler1.ashx?OperationType=upfile",
                        init: function () {
                            this.on("success", function (file) {
                                //console.log("File " + file.name + "uploaded");
                                alert("文件" + file.name + "上传成功");                       
                            });
                            this.on("complete", function (file) {
                                this.removeFile(file);
                            });
                            this.on("removedfile", function (file) {
                                //alert(file.name);
                            });
                        },
                      /*  accept: function (file, done) {
                            //if (file.name == "11.jpg") {
                            //    done("Naha, you don't.");
                            //}
                            //else {
                            done();
                        },*/
                        success: function (file, data) {
                            if (data.status === 1) {
                                $scope.uploadImage = data.message;
                                $scope.listUserImages();
                            } else {
                                //alertService.showAlert({
                                //    content: data.message,
                                //    type: 'warning'
                                //});
                                //$('.dz-error-mark').show();
                                //alert(data.message);
                            }
                        },
                        dictDefaultMessage:
                        '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> 上传</span> 文件 \<span class="smaller-80 grey">点击</span> <br /> \<i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
                        dictResponseError: 'Error while uploading file!',
                        //change the previewTemplate to use Bootstrap progress bars
                        previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
                    });
                } catch (e) {
                    alert('Dropzone.js does not support older browsers!');
                }
            });
        </script>
    </head>
    <body>
        <form id="dropzone" runat="server" action="Handler1.ashx?OperationType=upfile" class="dropzone dz-clickable"  enctype="multipart/form-data" method="post">
         <div class="dz-message" style="width:50px;height:50px;">
          <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>
            </div>
        <div>
    
    <div id="FileBed"></div>点击上传文件
      <input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;" />
        </div>
        </form>
        
    </body>
    </html>

    3后台处理代码

     public class Handler1 : IHttpHandler
        {
    
            public void ProcessRequest(HttpContext context)
            {
                 string operatype = context.Request.QueryString["OperationType"];
                 if (operatype == "upfile")
                 {
                     HttpPostedFile file = context.Request.Files["FileData"];
                     if (file != null)
                     {
                         string fullPath = System.IO.Path.Combine(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "update"), DateTime.Now.Date.ToString("yyyyMMdd"));
                         file.SaveAs(fullPath + file.FileName);                 
                     }
                 }
                context.Response.ContentType = "text/plain";
                context.Response.Write("上传成功");
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }



    源代码下载



    展开全文
  • ajax上传项目,不需要表单和设置表单二级制数据传输,直接选择文件就异步上传了,绝对靠谱,也可融合与自己的项目里面去,简单易操作,看了基本都明白。
  • 遇到了一个上传文件和下载文件的业务,利用ajax实现,上传单文件整体上传,不进行分片上传相对简单,这里也暂不讨论大文件分片上传的情况,后面可能会写这个。下载文件如果后端返回链接可以直接赋值给a的href点击...
  • 前端Ajax上传文件并发送请求 js //上传图片 function uplodeFile() { var file=$('#Agreement_file')[0].files[0]; console.log(file); var form = new FormData(); form.append('img',file); $.ajax({ type...
  • jquery+ajax上传文件

    2013-02-18 13:43:58
    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载。
  • ajax上传文件方法 原理

    千次阅读 2013-12-09 10:37:54
    使用ajax上传文件方法 众所周知ajax是使用了浏览器内部的XmlHttpRequest对象来传输XML数据的。既然是Xml的数据传输,那么传输的数据肯定是文本的,而文件上传则需要传输二进制的数据,显然用ajax是不可能的。...
  • 文件上传在Web程序中是常用...在JavaWeb中使用ajax技术实现带有进度条的文件上传,实现的方法有多种,大概逻辑分为:当客户端上传文件发送请求后,服务器将上传的文件写入某路径中,在此上传的过程中,将文件上传的...
  • 查看了半天原因,最后发现当点击取消的时候,上传文件的dialog弹框虽然关了,但是当文件过大的时候ajax请求并没有结束,还在发送请求上传文件,百度发现有一个中断ajax请求的操作,在点击取消按钮的时候中断ajax就好...
  • 先说下我的需求: 前端我需要给用户一个上传文件页面,用户点击上传后,不会像提交form一样跳转,而是在上传页面下方显示上传情况(正在分析/上传出现错误/上传成功),当然首选ajax来实现了 后端的话我拿到文件,...
  • 文件ajax上传

    千次阅读 2013-08-05 10:53:42
    首先,ajax不能上传文件,所以文件ajax上传的原理不是ajax,ajax上传的用的是表单提交。  一般的表单提交会刷新页面,所谓的ajax上传就无从谈起,所以先说说无刷新的表单提交   提交  提交如上表单,...
  • 使用ajax提交form表单,包括ajax文件上传 转载自:点击打开链接 使用ajax提交form表单,包括ajax文件上传 转载自:点击打开链接
  • spring boot 下 ajax 上传文件

    千次阅读 2018-09-21 10:51:14
    版权声明:本文为博主原创文章,未经博主允许不得转载。 ... jsp: ... ${bjxx.id}" tasktype="${tasktype}" formid="fileUploadForm" onchange="uploadfile... logger.error("上传文件:",e); return null; } }  
  • 众所周知ajax是使用了浏览器...这里要说的是用ajax上传文件其实只是类似ajax的那种操作,实际上并没有用到xmlhttprequest对象,对于用户来说是不管使用的什么技术,他们要的是流程简便。客户有个需求是需要在表单操作时
  • 想做个上传文件袋滚动条的功能,用PHP+ajax来实现,例如点击 上传按钮 上传后返回上传成功路径,有滚动条显示。谁有代码分享下,谢谢
  • 点击上传时,调用对应的fileupload函数,通过ajax文件异步传送到servlet中处理。注意在文件上载时,所使用的编码类型应当是“multipart/form-data”,它既可以发送文本数据,也支持二进制数据上载。 <%@ ...
  • 1、在项目中需要点击按钮即上传文件,提交表单时只需要保存文件ID即可; 2、同一个表单中有多处需要上传文件,多个按钮异步上传文件互不影响; 3、java后台使用同一个文件上传接口。 二、利用ajaxfileupload.js...
  • 我正在做一个上传头像功能,前端使用vue.js,后端是springboot构建的项目,但是每次vue请求传到后端时,都会报格式错误。代码如下: 后端接口: @PostMapping("/userinfo/uploadHeadImg") public ...
  • AJAX文件上传实现

    2014-04-28 16:46:16
    由于文件上传是以二进制流的形式进行传输的,而身为AJAX的关键对象之一的xmlhttp对象传输的却是xml格式的字符流,导致要我们想要真正的实现AJAX异步文件上传的梦想破灭。于是不笨的高层应用程序员只好放弃xmlhttp...
  • 前段代码: // 这里使用display:none将input标签隐藏 <input type="file" name="file" id="file" onchange="fileUpload()" style=...input type="button" onclick="select_file()" value="上传"> 点...
  • ajax文件上传

    千次阅读 2019-04-24 10:07:08
    表单上传文件 传统的文件上传是通过form表单,俗话说不关注实际问题的解决方法都是假把式,那么我就模拟一个用户注册的功能。 观察如下代码: [HttpPost] public ActionResult Upload(string username, string ...
  • jQuery+ajax实现文件上传功能(显示...使用ajax发起上传文件的请求 设置文件的路径 使用xhr获得文件上传的进度 当文件上传完成让进度条显示绿色 <style> #loading { width: 20px; height: 20px; } #img
  • 注: js部分主要是在页面上选择文件文件通过ajax请求传到后台,我这里需要后台的回传地址然后把回传地址提交到服务器 &lt;form class="form-horizontal m-t" id="form" method="...
  • <form name="Form2" id="form2" action="fileupload3" method="post" enctype="multipart/form-data"> //切记要加enctype="multipart/form-data",这是文件上传所设置的格式 且必须是post格式 </form> js+...
  • 很多时候,上传文件都只是一个小页面中的一个功能,要求在实现文件上传的前提下不刷新页面。而一般情况下将客户端的文件包装成网络地址传递到服务器端然后通过流来进行文件传输的任务都是使用浏览器来帮我们完成的...
  • atitit.ajax上传文件的实现原理 与设计   1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2. 传统的html4 + ajax 是无法直接实现上传文件 1 2.1. 传统的实现方式iframe ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,353
精华内容 10,541
关键字:

ajax上传文件点击