zoukankan      html  css  js  c++  java
  • Jquery FormData文件异步上传 快速指南

    网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题;

    使用jquery2.1版本,较老版本不支持异步文件上传功能;


    表单代码:

    1. <form id="fileUploadForm">  
    2.     <input type="file" name="file" class="imageUpload"/>  
    3.     <span id="commit">提交到服务器</span>  
    4. </form>  
    1. <form id="fileUploadForm">  
    2.     <input type="file" name="file" class="imageUpload"/>  
    3.     <span id="commit">提交到服务器</span>  
    4. </form>  

    创建一个表单,里面包含一个file input 


    脚本代码:

    [javascript] view plain copy
    print?
    1. function uploadFile() {  
    2.         //将表单封装为一个formData对象  
    3.         var formData = new FormData($('#fileUploadForm')[0]);  
    4.         $.ajax({  
    5.             url:'http://127.0.0.1:8080/image/',  
    6.             type:'POST',  
    7.             //将formData对象作为参数进行上传  
    8.             data:formData,  
    9.             contentType: false,  
    10.             processData: false,  
    11.             success:function (data) {  
    12.                 //文件上传成功后的处理  
    13.                 $('#showUploadContent').append('<div>name:'+data.name+'<br/>url:'+data.url+'<img src="http://192.168.1.107/'+data.url+'"></div>')  
    14.             }  
    15.         })  
    16.     }  
    17.     $(function () {  
    18.         //为提交按钮添加点击事件  
    19.         $('#commit').click(function () {  
    20.             uploadFile();  
    21.         })  
    22.     })  
    [javascript] view plain copy
    print?
    1. function uploadFile() {  
    2.         //将表单封装为一个formData对象  
    3.         var formData = new FormData($('#fileUploadForm')[0]);  
    4.         $.ajax({  
    5.             url:'http://127.0.0.1:8080/image/',  
    6.             type:'POST',  
    7.             //将formData对象作为参数进行上传  
    8.             data:formData,  
    9.             contentType: false,  
    10.             processData: false,  
    11.             success:function (data) {  
    12.                 //文件上传成功后的处理  
    13.                 $('#showUploadContent').append('<div>name:'+data.name+'<br/>url:'+data.url+'<img src="http://192.168.1.107/'+data.url+'"></div>')  
    14.             }  
    15.         })  
    16.     }  
    17.     $(function () {  
    18.         //为提交按钮添加点击事件  
    19.         $('#commit').click(function () {  
    20.             uploadFile();  
    21.         })  
    22.     })  


    NOTE:提交按钮使用<button/> <input type="submit"/> 的情况下将会页面跳转,我使用的是<span/>元素:

    <span id="commit" >提交到服务器</span>

    这样进行文件上传就不会出现页面跳转,达到异步上传;

  • 相关阅读:
    PAT 甲级 1072 Gas Station (30 分)(dijstra)
    python flask框架学习(二)——第一个flask程序
    python flask框架学习(一)——准备工作和环境配置与安装
    【Beats】Filebeat工作原理(十七)
    【Beats】Filebeat介绍及使用(十六)
    Dapper简介
    Sequelize ORM
    StackExchange / Dapper
    TypeORM 简介
    Egg.js 是什么?
  • 原文地址:https://www.cnblogs.com/jpfss/p/8953605.html
Copyright © 2011-2022 走看看