前台Form表单上传文件到后台,html+js(包括文件选择按钮和上传按钮)

1、html

前台略显粗糙,一个文件上传的input框,一个提交按钮

	<form id="attachments1" enctype="multipart/form-data" class="form-horizontal" novalidate="novalidate">
							<div class='form-body'>
								<div class='form-group'>
									<label class="control-label col-md-1">附件上传:</label>
									<div id="attachmentInputs1" class="col-md-3">
										<input name="attachment1" type="file" id = "file1" class="form-control input-attachment" multiple="multiple"/>
										<button id="file3" type="button" ng-click="check1()"  ng-class="button-primary"
												class="button-primary"> {{sysFileInfoCommon.ocr}}
										</button>
									</div>
								</div>
							</div>
						</form>

2、js

ajax提交成功后的属于我自己的业务代码,大家可自动屏蔽

$scope.check1 = function () {
            var doc = document.getElementById('file1');
            for(var i=0;i<doc.files.length;i++){
                var name = doc.files[i].name;
                var hz = name.substring(name.lastIndexOf(".")+1);
                if(hz!="pdf" && hz!="jpg"){
                    GillionMsg.alert($scope.sysFileInfoCommon.tips, "请选择正确的文件类型!", null);
                    return false;
                }
            }
            var formData = new FormData();
            //注入 name=file
            var files = $("#attachmentInputs1 input[type='file']");
            for (var i = 0; i < files[0].files.length; i++) {
                formData.append("attachment", files[0].files[i]);
            }

            //执行上传
            $.ajax({
                url:$oam.ctx + '/dc/mblFileUpload1',
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    if (data.success != undefined && data.success == true) {
                        $scope.getSysFileInfoPages();
                        if ($scope._pageState) $scope._pageState.resetDataState();
                        var gridVerifyArr = [
                            {scope: "$scope", grid: ["sysFileInfo"]},
                            {
                                scope: "$scope",
                                grid: ["sysFileInfoAppRtm"],
                                loadOneToOneSubBoData: false,
                                clearDeletedJsVariable: false
                            }
                        ];
                        _this.gridVerify({boName: "SysFileInfo", scope: $scope, settings: gridVerifyArr});
                        GillionMsg.alert($scope.sysFileInfoCommon.tip, data.msg);

                        $timeout(function () {
                            if ($scope._pageState) $scope._pageState.resetDataState();
                        });
                    }
                },
            });
        };

3、controller

后台接受到的MultipartFile[] attachment,大家可以根据业务进行操作

@RequestMapping("/dc/mblFileUpload1")
    public ResultVo batchUploadFile1(@RequestParam("attachment")MultipartFile[] attachment,HttpServletRequest request, HttpServletResponse response){
        String extension = "MBL";
        return batchUploadManager.batchUploadFile(attachment,extension,request,response);

    }

关于获取表单内容还有另一种方法:
直接这样:

 var formData = new FormData($('#uploadForm')[0]);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
首先,你需要在你的HTML文件中添加一个包含文件上传功能的表单: ```html <form id="image-form"> <input type="file" id="image" name="image"> <button type="submit">上传</button> </form> ``` 接下来,在你的JavaScript文件中,你需要使用Ajax来向服务器发送请求,将上传的图片文件发送到指定的文件夹中: ```javascript const form = document.getElementById('image-form'); const input = document.getElementById('image'); form.addEventListener('submit', (e) => { e.preventDefault(); // 阻止表单默认提交行为 const formData = new FormData(); formData.append('image', input.files[0]); // 向服务器发送POST请求 const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.send(formData); // 监听上传进度 xhr.upload.addEventListener('progress', (event) => { const percent = (event.loaded / event.total) * 100; console.log(`上传进度:${percent}%`); }); // 监听上传完成事件 xhr.addEventListener('load', () => { console.log('上传完成!'); }); }); ``` 在服务器端,你需要使用Node.js的Express框架来处理这个请求,并将上传文件保存到指定文件夹中: ```javascript const express = require('express'); const multer = require('multer'); const app = express(); // 设置文件上传路径 const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, './uploads/'); }, filename: (req, file, cb) => { cb(null, file.originalname); } }); const upload = multer({ storage }); // 处理文件上传请求 app.post('/upload', upload.single('image'), (req, res) => { res.send('上传成功!'); }); // 在静态资源目录中提供上传文件 app.use('/uploads', express.static('uploads')); app.listen(3000, () => { console.log('Server is running on port 3000.'); }); ``` 最后,在你的HTML文件中,你可以使用`URL.createObjectURL()`方法来在前端显示上传的图片: ```javascript const imageUrl = URL.createObjectURL(input.files[0]); const imageElement = document.createElement('img'); imageElement.src = imageUrl; document.body.appendChild(imageElement); ``` 这样就完成了上传图片,并在前端显示图片的功能。需要注意的是,这个示例只是一个简单的演示,实际应用中需要考虑文件上传的安全性和服务器端的性能问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值