React+ajax implementiert die Vorschau von Bildern vor dem Hochladen-js-Tutorial-php.cn

Dieses Mal bringe ich Ihnen React+ajax, um eine Vorschau des Bildes vor dem Hochladen anzuzeigen. Das Folgende ist ein praktischer Fall Schauen Sie einmal vorbei. Ich habe zuvor im Internet nach Informationen zum Hochladen von Bildern mit Ajax gesucht. Die meisten Leute haben mit jQuery geschrieben, aber die Verwendung von JQuery ist hier von geringem Nutzen, daher habe ich es selbst geschrieben.

Klicken Sie im obigen Bild zunächst auf die ausgewählte Datei oben. Nach Auswahl des Bildes wird das Bild automatisch auf den Server hochgeladen und der Bildname und der Pfad angegeben des Bildes auf dem Server wird zurückgegeben. Anschließend werden der Dateiname und das Bild auf der Seite angezeigt.

Quellcode

Ajax-Upload-VorschauReagieren:

Selbstgekapselter Ajax-Code:

import React from 'react';
import Http from './http'
const URL = 'http://localhost:8080/fileuploadExample/UploadServlet';
export default class App extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   uploadedFile: "",
   uploadedFileGetUrl: ''
  };
 }
 error() {
  alert('error')
 }
 callback(result) {
  this.setState({
   uploadedFile: result.uploadedFile,
   uploadedFileGetUrl: result.uploadedFileGetUrl
  });
 }
 handleImageUpload(e) {
  e.preventDefault()
  let file = e.target
  Http.post(URL, file, this.callback.bind(this), this.error)
 }
 render() {
  return (
   <p>
    <input type="file" onChange={this.handleImageUpload.bind(this)}/>
    <p>
     {this.state.uploadedFileGetUrl === '' ? null :
      <p>
       <p>{this.state.uploadedFile}</p>
       <img src={this.state.uploadedFileGetUrl} alt="你选择的图片"/>
      </p>}
    </p>
   </p>
  )
 }
}

Nach dem Login kopieren

In Bezug auf das Hochladen von Bildern im Java-Hintergrund gibt es viele Beispiele, die ich für den asynchronen

var Http = (function() {
 var http = {};
 if (typeof window.XMLHttpRequest === "undefined") {
  window.XMLHttpRequest = function() {
   // 如果是i5就用Microsoft，其他就用Msxml2
   return new window.ActiveXObject(navigator.userAgent
     .indexOf("MSIE 5") >= 0 ? "Microsoft.XMLHTTP"
     : "Msxml2.XMLHTTP");
  };
 }
 http.post = function(url, data, callback, error) {
  if (typeof data === "function") {//data可以不穿值
   callback = data;
   data = null;
  }
  var timeout = setTimeout(function() {//超时设置
   error();
  }, 10000);
  var xhr = new XMLHttpRequest();
  xhr.open('post', url);
  xhr.onreadystatechange = function() {
   if (xhr.readyState === 4) {
    clearTimeout(timeout);//清除超时
    if (xhr.status === 200){
     //alert(xhr.responseText);
     callback(JSON.parse(xhr.responseText));//调用回调函数
    } else {
     error();
    }
    xhr = null;// 删除对象,防止内存溢出
   }
  };
  xhr.onerror = function() {//如果产生了错误
   clearTimeout(timeout);
   error();
  };
  xhr.send(http.formDataCode(data));
 };
 http.formDataCode = function(data) {
  var fd = new FormData();
  if (!data) {
   return null;
  }
  for ( var key in data) {
   if(data.files){
    var file=data.files[0];
    fd.append("image", file);
   }else{
    fd.append(key, data[key]);
   }
  }
  return fd;
 }
 return http;
})();
export default Http

Nach dem Login kopieren

Datei-Upload

verwenden kann, einschließlich des Demo-Artikels Werfen Sie einen Blick darauf:

Der obige Java-Code hat diese Punkte geändert:

package com.example;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.List;
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
 * Servlet implementation class UploadServlet
 */
@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;
 // 保存文件的目录
 private static String PATH_FOLDER = "/";
 // 存放临时文件的目录
 private static String TEMP_FOLDER = "/";
 /**
  * @see HttpServlet#HttpServlet()
  */
 public UploadServlet() {
  super();
  // TODO Auto-generated constructor stub
 }
 @Override
 public void init(ServletConfig config) throws ServletException {
  // TODO Auto-generated method stub
  super.init();
  ServletContext servletCtx = config.getServletContext();
  // 初始化路径
  // 保存文件的目录
  PATH_FOLDER = servletCtx.getRealPath("/upload");
  // 存放临时文件的目录,存放xxx.tmp文件的目录
  TEMP_FOLDER = servletCtx.getRealPath("/uploadTemp");
 }
 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  *  response)
  */
 protected void doGet(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {
  response.setHeader("Access-Control-Allow-Origin",
    "http://localhost:3000");
  response.setHeader("Access-Control-Allow-Credentials", "true");
  request.setCharacterEncoding("utf-8"); // 设置编码
  response.setCharacterEncoding("utf-8");
  response.setContentType("text/html;charset=UTF-8");
  // 获得磁盘文件条目工厂
  DiskFileItemFactory factory = new DiskFileItemFactory();
  // 如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
  // 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
  /**
   * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem
   * 格式的 然后再将其真正写到 对应目录的硬盘上
   */
  factory.setRepository(new File(TEMP_FOLDER));
  // 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
  factory.setSizeThreshold(1024 * 1024);
  // 高水平的API文件上传处理
  ServletFileUpload upload = new ServletFileUpload(factory);
  try {
   // 提交上来的信息都在这个list里面
   // 这意味着可以上传多个文件
   // 请自行组织代码
   List<FileItem> list = upload.parseRequest(request);
   // 获取上传的文件
   FileItem item = getUploadFileItem(list);
   // 获取文件名
   String filename = getUploadFileName(item);
   // 保存后的文件名
   String saveName = new Date().getTime()
     + filename.substring(filename.lastIndexOf("."));
   // 保存后图片的浏览器访问路径
   String picUrl = request.getScheme() + "://"
     + request.getServerName() + ":" + request.getServerPort()
     + request.getContextPath() + "/upload/" + saveName;
   System.out.println("存放目录:" + PATH_FOLDER);
   System.out.println("文件名:" + filename);
   System.out.println("浏览器访问路径:" + picUrl);
   // 真正写到磁盘上
   item.write(new File(PATH_FOLDER, saveName)); // 第三方提供的
   PrintWriter writer = response.getWriter();
   System.out.print("{");
   System.out.print("uploadedFile:"+ "\"" + filename + "\"");
   System.out.print(",uploadedFileGetUrl:\"" + picUrl + "\"");
   System.out.print("}");
   
   JSONObject result = new JSONObject();
   result.put("uploadedFile", filename);
   result.put("uploadedFileGetUrl", picUrl);
   writer.write(result.toString());
   writer.close();
  } catch (Exception e) {
   e.printStackTrace();
   /*
    * PrintWriter writer = response.getWriter(); writer.print("{");
    * writer.print("error:"+e.toString()); writer.print("}");
    * writer.close();
    */
  }
 }
 private FileItem getUploadFileItem(List<FileItem> list) {
  for (FileItem fileItem : list) {
   if (!fileItem.isFormField()) {
    return fileItem;
   }
  }
  return null;
 }
 private String getUploadFileName(FileItem item) {
  // 获取路径名
  String value = item.getName();
  System.out.println(value + ":value");
  // 索引到最后一个反斜杠
  int start = value.lastIndexOf("/");
  // 截取 上传文件的 字符串名字，加1是 去掉反斜杠，
  String filename = value.substring(start + 1);
  return filename;
 }
 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  *  response)
  */
 protected void doPost(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {
  doGet(request, response);
 }
}

Nach dem Login kopieren

1. Fügen Sie die beiden Codezeilen

ein, um eine domänenübergreifende Ausführung durchzuführen . Natürlich ist dies möglicherweise nicht sicher

response.setHeader("Access-Control-Allow-Origin","http://localhost:3000");
response.setHeader("Access-Control-Allow-Credentials", "true");

Nach dem Login kopieren

Hier wird die JSON-Datenübertragung zwischen der Seite und dem Server verwendet

JSONObject result = new JSONObject();
result.put("uploadedFile", filename);
result.put("uploadedFileGetUrl", picUrl);
writer.write(result.toString());

Nach dem Login kopieren

Ich glaube, Sie haben es gemeistert Die Methode nach dem Lesen des Falls in diesem Artikel finden Sie unter PHP Chinesisch Weitere verwandte Artikel online!

Empfohlene Lektüre:

So verwenden Sie Ajax, um Kommentare einzureichen und automatisch zu aktualisieren

AJAX erkennt Benutzereingaben, ohne den Vornamen zu aktualisieren

Das obige ist der detaillierte Inhalt vonReact+ajax implementiert die Vorschau von Bildern vor dem Hochladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!