1. 程式人生 > >使用formData上傳檔案

使用formData上傳檔案

使用HTML5的formData物件 用ajax非同步的方式提交form表單(還可以實現非同步提交檔案),可參考部落格:

這裡要注意幾點:

  • <form>標籤新增enctype="multipart/form-data"屬性
  • jQuery 的 ajax 中processData設定為false (表示不需要對資料做處理)
  • jQuery 的 ajax 中cache設定為false (表示上傳檔案不需要快取)
  • jQuery 的 ajax 中contentType設定為false (因為前面已經聲明瞭是‘FormData物件’)

如果沒有<form>標籤,也沒有enctype="multipart/form-data"

屬性,怎麼使用formData物件提交表單呢?如下方式:

var formData = new FormData();
formData.append('name', $('#name').val());
formData.append('file', $('#file')[0].files[0]);

$.ajax({
    url: '',
    type: 'POST',
    data: formData,
    cache: false,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

注意:要想讓<input type="file">標籤 能夠上傳多個檔案,只需要在<input type="file">裡新增multiplemultiple="multiple"屬性。

php檔案:(示例)

<?php  
$name = isset($_POST['name'])? $_POST['name'] : '';  
$gender = isset($_POST['gender'])? $_POST['gender'] : '';  
$filename = time().substr($_FILES
['photo']['name'], strrpos($_FILES['photo']['name'],'.')); $response = array(); if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){ $response['isSuccess'] = true; $response['name'] = $name; $response['gender'] = $gender; $response['photo'] = $filename; }else{ $response['isSuccess'] = false; } echo json_encode($response); ?>

相關推薦

ajax FormData檔案和資料,進度條顯示

http://www.jb51.net/article/114003.htm 一、基於input 方式formData上傳檔案和資料: <divclass="startleft describebox"> <labelclass="title">商

FormData檔案

不設定undefined  就不會有逗號,但是這個也沒了,所以 問題還是沒有解決。。。最後在一個ionic交流群了,一個前輩告訴我,用原生的 XMLHttpRequest 提交表單就可以解決問題了問題解決: 用原生XMLHttpRequest提交表單(用的不是ionic封裝的那個http請求,用的是XMLHt

使用formData檔案

使用HTML5的formData物件 用ajax非同步的方式提交form表單(還可以實現非同步提交檔案),可參考部落格: 這裡要注意幾點: <form>標籤新增enctype="m

SpringMVC前臺利用ajax和FormData檔案

前臺的頁面結構及js邏輯 1、 html結構: <%--此處必須是multipart/form-data--%> <form method="post" enctype="mu

Ajax 檔案(input file FormData

FormData物件用以將資料編譯成鍵值對,以便用XMLHttpRequest來發送資料。其主要用於傳送表單資料,但亦可用於傳送帶鍵資料(keyed data),而獨立於表單使用。 jQuery Ajax 上傳檔案 通過 Ajax 向後臺傳送檔案(包括圖片)時,其引數型別屬於物件。可以建立一個 FormD

H5 通過Ajax方式檔案 使用FormData進行Ajax請求

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

FormData物件的使用以及檔案

FormData物件用以將資料編譯成鍵值對,以便用XMLHttpRequest來發送資料。其中最主要用於傳送表單資料,但亦可用於傳送帶鍵資料(keyeddata),而獨立於表單使用。如果表單enctype屬性設為multipart/form-data,則會使用表單的**submit()**方

微信小程式wx.uploadFile(檔案)PHP伺服器獲取formData的資料

例如下面的程式碼是微信小程式上傳圖片的程式碼: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({

JS 檔案FormData 與Blob 物件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SA</title> <link rel="style

利用js/jq 利用FormData 物件和ajax檔案

new FormData(); 可以獲取某個表單,但是有時候感覺不太靈活。可以利用jq獲取指定input type=file 中的檔案,將其賦值給FormData 例項的某個屬性,做上傳。 HTML: <div class="test" style="

HTML5 jQuery+FormData 非同步檔案,帶進度條

利用jQuery和html5的FormData非同步上傳檔案的好處是: 實現很簡單很方便地支援進度條很方便地進行擴充套件和美化 先看看效果圖: 圖片上傳後的結果: 實現步驟如下: 第二步:上傳頁面的html程式碼: [html] view plain

使用FormData進行Ajax請求檔案到controller層的實現

需求背景: 頁面上傳一個檔案到controller層,然後後臺對檔案進行處理。檔案型別不限。 第一種:單純的上傳檔案 頁面功能展現: 第一步:首先需要兩個jar commons-fileupload

Ajax使用FormData物件檔案的兩種方式

以下是Demo的專案結構:主要就是一個servlet3.0和一個jsp頁面 由於使用的是servlet3.0,所以無需配置web.xml,以下是idnex.jsp頁面: <%@ page language="java" contentType="

通過jQuery Ajax使用FormData物件檔案

FormData物件,是可以使用一系列的鍵值對來模擬一個完整的表單,然後使用XMLHttpRequest傳送這個"表單"。在 Mozilla Developer 網站 使用FormData物件 有詳盡的FormData物件使用說明。但上傳檔案部分只有底層的XMLHttpRequest物件傳送上傳請求,那麼怎

通過Ajax使用FormData物件無重新整理檔案

寫在前面:本文說的這個方案有瀏覽器相容性問題;所有主流瀏覽器的較新版本已經支援這個物件了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+,對相容性比較敏感的網站慎用。 在工作中遇到了一個問題:在一個頁面中,有4塊內容

非同步檔案使用new FormData($(‘#uploadForm‘)[0])序列化表單

/// <summary>/// 上傳新圖片,(包含檔案上傳) /// </summary>/// <returns></returns>public JsonResult UpLoad() {

使用FormData多個檔案

由於專案中使用到,特此寫個Demo html程式碼: <html> <head> <title>Title</title> <s

H5用FormData物件提交表單及檔案

1、如何使用 use multipart/form-data when your form includes any <input type="file"> elements. 2、怎麼

JQuery Ajax使用FormData物件檔案 圖片

通過jQuery Ajax使用FormData物件上傳檔案FormData物件,是可以使用一系列的鍵值對來模擬一個完整的表單,然後使用XMLHttpRequest傳送這個"表單"。在 Mozilla D

h5特性formdata帶引數檔案到node端

html: <input type="file" id="addpic" multiple="multiple"/> <button id="uploadpic" style="