ajaxfileupload_ajaxfileupload data无法传参-优快云博客

本文链接：https://blog.youkuaiyun.com/mrhaoxiaojun/article/details/52232142

本文介绍了一种利用Ajax技术实现文件上传的方法。通过jQuery插件实现了异步文件上传功能，并展示了如何通过HTML和JavaScript代码来预览上传的图片。此外，还提供了文件大小限制和上传按钮等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ajaxfileupload</title>
<span style="white-space:pre">	</span><style>
            .upload {
                width: 114px;
                height: 143px;
                margin-right: 20px;
            }
            
            .upload .upload-body {
                background: #f6f7f8;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                border-radius: 2px;
                text-align: center;
                width: 114px;
                height: 143px;
                position: relative;
                float: left;
                cursor: pointer;
            }
            
            .upload .upload-body a {
                display: block;
                cursor: pointer;
                text-decoration: underline;
                padding-top: 45px;
                padding-bottom: 25px;
            }
            
            .upload .upload-body span {
                display: block;
                color: #9c9c9c;
                cursor: pointer;
            }
            
            .upload .upload-body img {
                cursor: pointer;
                width: 100%;
                height: auto;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                display: none;
            }
            
            .upload .upload-body input {
                position: absolute;
                left: 0;
                width: 100%;
                top: 0;
                height: 100%;
                opacity: 0;
                filter: alpha(opacity=0);
                font-size: 500px;
                cursor: pointer;
                overflow: hidden;
            }
    </style>
</head>

<body>
    <!-- html -->
    <div class="upload">
        <div class="upload-body">
            <a style="text-decoration: none;">+资质证书</a>
            <span>不超过500KB</span>
            <img src="" id="up-img">
            <input type="file" id="uploadFile" name="uploadFile" ">
        </div>
    </div>

    <!-- javascript -->
    <script type="text/javascript " src="jQuery v1.11.3.min.js "></script>
    <script type="text/javascript " src="ajaxfileupload-2.1.js "></script>
    <script>
/*---------------------------------------------这段区域建议放到公共js里，应用于所有页面----------------------------------------------------*/
    var module = {};
    module.common = {
        // 文件上传
        ajaxFileUpload: function(uploadUrl, fileToUploadId, callback) {
            $.ajaxFileUpload({
                url: uploadUrl, //用于文件上传的服务器端请求地址
                secureuri: false,//是否需要安全协议，一般设置为false
                fileElementId: fileToUploadId, //文件上传域的ID
                dataType: 'text', // 支持ie,,,,也可以选则其他方式如json
                success: function(data, status) {
                    if (callback) {
                        callback(data);
                    }
                },
                error: function(data, status, e) {//服务器响应失败处理函数
                    alert(e)
                }
            });
            return false;
        }, 

        // 文件上传
        upload: function(fileToUploadId, callback) {
            /*
            *   第一个参数为后端指定线上的路径
            *   第二个为表单元素id
            *   第三个为成功或失败后的回调函数
            */
            module.common.ajaxFileUpload(SITE.context + '/file/upload',
                fileToUploadId, callback);
        }
    };
    /*-------------------------------------------------------------------------------------------------*/

    /*
    *   调用方法
    *   parameter{
    *       uploadFile:文本id
    *       callback
    *   }
    */
    $("#uploadFile").on("change",function(){
        module.common.upload('uploadFile', function(data) {
            // 在此callback中，做ajax请求成功后的操作，data为后端返回数据
            console.log(data)
             $("#up-img ").prop("src ",data.imgurl //此处为后端返回的线上img路径).css("display","block");
        });
    })
    </script>
</body>

</html>

</pre><pre code_snippet_id="1835975" snippet_file_name="blog_20160817_1_8577952" name="code" class="html">其他文档：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html