ajax实现上传文件

 

1.html部分

<input style="width: 280px" type="file" name="upLoadProjectPlan" id="upLoadProjectPlan" 
     value="<%=taskAppend.getTaskAllocationDoc()%>"/>

 <a style="float: right;  margin-right: 40px" class="button" href="javascript:void(0)"
  onclick="UpladFile('upLoadProjectPlan', '<%=task.getTaskid() %>')"><span>上传</span></a>

2.js中利用ajax产生表单并发送表单

function UpladFile(fileUploadId, taskid) {

         var fileObj = document.getElementById(fileUploadId).files[0]; // 获取文件对象

         var FileController = "updateWorkAction!fileUpload"; // 接收上传文件的后台处理程序地址 

         // FormData 对象

         var form = new FormData();

         //form.append("author", "hooyes");                        // 可以增加表单数据
         form.append("taskid", taskid);
         form.append("file", fileObj);                           // 文件对象

         // XMLHttpRequest 对象

         var xhr = new XMLHttpRequest();

         xhr.open("post", FileController, true);

         xhr.onload = function () {
             location.reload(true);   
             alert("上传完成!");

         };

         xhr.send(form);
    }

3.Action部分

public class UpdateWorkAction extends ActionSupport{
    private DistributeDao distributeDao;
    private String taskid;
    private List<File>    file; // 上传的文件
    private List<String> fileFileName; // 文件名称
    private List<String> fileContentType; // 文件类型
    
    public DistributeDao getDistributeDao() {
        return distributeDao;
    }

    public void setDistributeDao(DistributeDao distributeDao) {
        this.distributeDao = distributeDao;
    }

    public List<File> getFile() {
        return file;
    }

    public void setFile(List<File> file) {
        this.file = file;
    }

    public List<String> getFileFileName() {
        return fileFileName;
    }

    public void setFileFileName(List<String> fileFileName) {
        this.fileFileName = fileFileName;
    }

    public List<String> getFileContentType() {
        return fileContentType;
    }

    public void setFileContentType(List<String> fileContentType) {
        this.fileContentType = fileContentType;
    }

    private void init() throws UnsupportedEncodingException{
        ServletActionContext.getRequest().setCharacterEncoding("UTF-8");
        ServletContext context = ServletActionContext.getServletContext();  
    }
    
    public String fileUpload() throws Exception{
        init();
        // 取得需要上传的文件数组
        List<File> files = getFile();
        if (files != null && files.size() > 0) {
            for (int i = 0; i < files.size(); i++) {
                FileOutputStream fos = new FileOutputStream(getSavePath() +
                           "\\" + getFileFileName().get(i)); FileInputStream fis = new FileInputStream(files.get(i)); byte[] buffer = new byte[1024]; int len = 0; while ((len = fis.read(buffer)) > 0) { fos.write(buffer, 0, len); } fis.close(); fos.close(); } TaskAppend taskAppend = distributeDao.findLeaderMsg(Integer.parseInt(taskid)); taskAppend.setTaskAllocationDoc(getFileFileName().get(0)); distributeDao.updateTaskAppend(taskAppend); } return "fileUpload"; } public String getTaskid() { return taskid; } public void setTaskid(String taskid) { this.taskid = taskid; } }

 

AJAX (Asynchronous JavaScript and XML) 是一种前端技术,用于创建异步网页应用程序,允许在不刷新整个页面的情况下与服务器进行数据交换。利用 AJAX 可以实现上传文件时提供用户体验,而无需等待页面完全加载。 上传文件AJAX 实现通常包括以下几个步骤: 1. 创建 XMLHttpRequest 对象:这是发送 HTTP 请求的核心工具,JavaScript 中的对象。 2. 配置请求:设置请求方法(如 `POST`)和 URL,以及要发送的数据(在这里是文件)。你可以通过创建 FormData 或者设置 `enctype="multipart/form-data"` 来处理文件数据。 ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/upload'); xhr.setRequestHeader('Content-Type', 'multipart/form-data'); ``` 3. 添加事件监听:注册一个 `onreadystatechange` 事件处理器,当请求状态改变时执行回调函数。 4. 发送请求并监听响应:调用 `send(file)`,其中 `file` 是用户选择的文件对象。然后检查 `readyState` 和 `status`,判断请求是否成功。 ```javascript xhr.onload = function() { if (xhr.status === 200) { // 成功 console.log(xhr.responseText); } else { console.error('Upload failed with status:', xhr.status); } }; ``` 5. 用户交互:通常会有一个文件输入元素 `<input type="file">`,用户选择文件后触发一个事件,例如 `change`,在这个事件中发起 AJAX 请求。 注意:为了安全性和跨域限制,在实际应用中可能需要后端服务器的支持,并且处理好错误处理和进度反馈。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值