Question

我想使用FormData Object打包图像并通过Ajax发送它。但我得到的是：

java.io.IOException的： org.apache.tomcat.util.http.fileupload.FileUploadException :. 请求被拒绝，因为没有找到多部分边界

这是我的代码：

function getId(arg) {
  return document.getElementById(arg);
}

function doFirst(){
  showPanel = getId("showPanel");
  sendbtn =  getId("sendbtn");
  mfile = getId("mFile");
  mfile.addEventListener('change',showUp,false);
}

function showUp(){
  var fReader = new FileReader();
  fReader.readAsDataURL(mfile.files[0]);
  fReader.onload = function (e){
  mImg = document.createElement("img");
  mImg.src=e.target.result;
  mImg.id ="mImg";
  showPanel.removeChild(showPanel.firstChild);
  showPanel.appendChild(mImg);	    
  showPanel.replaceChild(showPanel.firstChild,showPanel.lastChild);
		
//first time what i wrote is using apprnd(); 
//var fd = new FormData();
//fd.append("myFile",mfile.files[0]);
	   
//second time i through input all form to create a FormData object
  fd = new FormData(getIds("picForm"));
		
  xhr = new XMLHttpRequest();
		
/*this section just for test
xhr.onreadystatechange = function (){
console.log("readyState"+xhr.readyState); 
console.log("status"+xhr.status);
}*/

  xhr.open("post","AddMemberPic");
//xhr.setRequestHeader("Content-Type","multipart/form-data");
  xhr.send(fd);
  }
}
window.onload = doFirst;

    <div id="showPanel">upload picture</div>
    <form action = "AddMemberPic" method = "post" id="picForm" enctype="multipart/form-data">
    <input type="file" name="mFile" id="mFile">
    </form>

我的代码有什么问题？为什么？

感谢您的回答。

Answer 1

上传文件时，您必须在输入`<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp"> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view" android:layout_gravity="center" android:layout_margin="@dimen/card_margin" android:layout_width="fill_parent" android:layout_height="wrap_content" card_view:cardCornerRadius="2dp" card_view:contentPadding="0dp" card_view:cardPreventCornerOverlap="false"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="1" android:gravity="center|center_horizontal"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:weightSum="1" android:focusableInTouchMode="false" android:focusable="false" android:baselineAligned="false"> <FrameLayout android:layout_width="match_parent" android:layout_height="190dp" android:layout_weight="0.10"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/img_main" android:layout_width="match_parent" android:layout_height="match_parent" fresco:placeholderImage="@drawable/backgrondlayout2" fresco:actualImageScaleType="centerCrop" /> <FrameLayout android:layout_width="match_parent" android:layout_height="40dp" android:background="#42000000" android:layout_gravity="bottom|right" tools:ignore="RtlHardcoded"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large" android:text="Header" android:transitionName="title" android:id="@+id/txt_header" android:layout_gravity="left|center_vertical" android:gravity="right" android:padding="@dimen/textPadding" android:paddingRight="@dimen/textPadding" tools:ignore="RtlSymmetry" android:textColor="@color/off_white" /> </FrameLayout> </FrameLayout> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="90dp" android:weightSum="1" android:layout_weight="0.0001" android:baselineAligned="false"> <LinearLayout android:orientation="vertical" android:layout_width="109dp" android:layout_height="match_parent" android:layout_weight="0.10"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/img_logo" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.90"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:textAppearance="@android:style/TextAppearance.DeviceDefault.Small" android:text="Discription" android:id="@+id/txt_discription" android:paddingRight="4dp" android:gravity="right" tools:ignore="RtlHardcoded,RtlSymmetry" /> </LinearLayout> </LinearLayout> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:src="@android:drawable/divider_horizontal_textfield" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="fitXY" android:paddingBottom="1dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" /> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent" android:weightSum="2" android:layout_weight="0.99" android:gravity="right|center_horizontal" tools:ignore="RtlHardcoded" android:baselineAligned="false"> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent" android:weightSum="1" android:layout_weight="1.75" android:gravity="center_vertical|center_horizontal"> <ImageView android:id="@+id/img_distance_icon" android:contentDescription="" android:layout_height="24dp" android:layout_width="24dp" tools:layout_width="24dp" android:background="@drawable/ic_directions_black_24dp" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="52dp" android:layout_weight="0.35" android:gravity="center|right"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceSmall" android:text="0.0 km" android:id="@+id/txt_distance" android:layout_weight="0.77" android:gravity="right" android:paddingRight="@dimen/textPadding" android:textAlignment="viewStart" android:paddingLeft="@dimen/textPadding" android:maxLines="1" /> <TextView android:layout_width="100dp" android:layout_height="match_parent" android:textAppearance="?android:attr/textAppearanceSmall" android:text="Indoor" android:id="@+id/txt_indoor" android:gravity="center|right" android:textColor="#e00b0b" android:textSize="18sp" android:paddingRight="4dp" android:textAlignment="viewStart" tools:ignore="RtlHardcoded,RtlSymmetry" /> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout></android.support.v7.widget.CardView> </LinearLayout>`时存储文件。这是来自this tutorial的小片段：

change

它使用jQuery但可以轻松转移到vanilla JavaScript。

关于Ajax通过纯javascript上传图片

1 个答案: