jQuery File Upload文件上传_jquery.fileupload.js autoupload: false-优快云博客

本文链接：https://blog.youkuaiyun.com/jinyongting666/article/details/84876378

本文介绍使用jQueryFileUpload插件实现单文件上传的过程，包括HTML结构搭建、jQuery及相关插件引入，以及通过按钮触发文件上传的JavaScript代码实现。

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

最近在写单文件上传，用jQuery File Upload踩了好多坑，但终于实现了单文件，通过按钮提交。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试jqueryUploadFile</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.ui.widget.js"></script>
    <script src="js/jquery.iframe-transport.js"></script>
    <!--不跨域可不用xdr-transport-->
    <script src="js/jquery.xdr-transport.js"></script>
    <script src="js/jquery.fileupload.js"></script>
</head>
<body>
<input type="file" id="uploadFile" name="uploadFile">
<input type="button" id="uploadFileButton" value="上传文件"/>
<script>
    $(function () {
        $('#uploadFile').fileupload({
                replaceFileInput:false, //显示所选择的文件名
                autoUpload: false, //不自动上传
                url: 'http://localhost:8080/uploadFile',//请求的服务器地址
                dataType: 'text', //响应的json或者文本
                add:function (e,data) {
                    //绑定上传按钮的click事件，为了避免重复click，先解绑，再绑定
                    $('#uploadFileButton').off('click').on('click',function () {
                        data.submit()
                    })
                },
                done: function (e, data) {
                    console.log('done' + data)
                }
            })
    })
</script>
</body>
</html>