Ajax를 사용하여 파일 및 매개변수를 업로드하는 단계에 대한 자세한 설명
这次给大家带来Ajax进行文件与参数上传步奏详解，Ajax进行文件与参数上传的注意事项有哪些，下面就是实战案例，一起来看一下。
文件上传：
记得前一段时间，为了研究Ajax文件上传，找了很多资料，在网上看到的大部分是form表单的方式提交文件，对于Ajax方式提交文件并且也要提交表单中其他数据，发现提及的并不是很多，后来在同事的帮助下，使用ajaxfileupload最终完成了文件上传与其他提交的操作，现在分享给大家，希望大家能有有所帮助。
操作步骤：
1 导入jar包：
我们在使用文件上传时，需要使用到两个jar包，分别是commons-io与commons-fileupload，在这里我使用的两个版本分别是2.4与1.3.1版本的，需要使用JS文件与jar包最后会发给大家一个连接（如何失效请直接我给留言，我会及时更改，谢谢）。
2 修改配置文件：
当我们导入的jar包是不够的，我们需要使用到这些jar包，由于我当时使用的是SSM框架，所以我是在application-content.xml中配置一下CommonsMultipartResolver，具体配置方法如下：
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize"> <value>104857600</value> </property> <property name="maxInMemorySize"> <value>4096</value> </property> </bean>
3 JSP文件：
大家对form表单提交问价的方式很熟悉，但是我们有很多情况下并不能直接使用form表单方式直接提交。这时候我们就需要使用Ajax方式提交，Ajax有很多的好处，比如当我们不需要刷新页面获希望进行局部刷新的时候，我们就可以使用Ajax。下面是我的表单提交的JSP页面，其中包含JS的详细步骤和HTML文件：
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="../commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>发布资讯</title>
<script type="text/javascript" src="${ctx}/resources/new_js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/ajaxfileupload.js"></script>
<script type="text/javascript">
function save(){
var typeId = $("#type_span_info").attr("data-id");
if (typeof (typeId) == "undefined") {
$("#type_p_info").show();
return;
} else {
$("#type_p_info").hide();
}
var title = $("#title_input_info").val();
var summary = $("#summary_input_info").val();
var content = $("#content_textarea_info").val();
$.ajaxFileUpload({
url : "${ctx}/info/doUpload",
secureuri : false,//是否需要安全协议
fileElementId : 'file',
type : 'POST', //文件提交的方式
dataType : 'string',
cache : false, //是否进行页面缓存
async : true, // 是否同步提交
success : function(data) {
$.ajax({
url : '${ctx}/info/addInfo?fileUrl='+data,
type : 'post',
data:{title:title,summary:summary,content:content,typeId:typeId},
async : false,
success : function(result) {
if (result == 1) {
$("#del_prompt_p").text("添加成功");
fnError3();
} else if (result == 2) {
$("#del_prompt_p").text("添加失败")
fnError2();
} else {
$("#del_prompt_p").text("系统错误");
fnError2();
}
}
});
}
});
}
</script>
</head>
<body class="body_bg">
<p class="main">
<!--页面主体 start-->
<p class="main_content">
<p class="later_index clear wrap">
<p class="later_right fr">
<p class="roll_parent" id="roll_parent">
<p class="scroll_parent" id="scroll_parent">
<p class="scroll" id="scroll"></p>
</p>
<p class="roll_son" id="roll_son">
<p class="later_content later_content1">
<p class="release_name">
<h3>
<span>发布资讯</span>
</h3>
</p>
<p class="issue_content">
<form action="" id="form1" method="post" enctype="multipart/form-data">
<table class="issue_tab">
<tbody>
<tr>
<td><p><i>*</i><strong>标题</strong></p>
</td>
</tr>
<tr>
<td><input id="title_input_info" name="title_input_info" type="text" placeholder="最多可以输入40个字" type="text" maxlength="40"/>
<!-- <span class="colse"></span> -->
<p class="colse_tip"></p>
<!-- <p class="colse_tip" id="title_p_info" style="display:hidden;">请选择标题！</p> -->
</td>
</tr>
<tr>
<td><p><i>*</i><strong>摘要</strong></p></td>
</tr>
<tr>
<td><input name="summary_input_info" id="summary_input_info" type="text" placeholder="最多可以输入100个字" type="text" maxlength="100" />
<p class="colse_tip"></p></td>
</tr>
<tr>
<td><p><i>*</i><strong>内容</strong></p>
</td>
</tr>
<tr>
<td><textarea name="content_textarea_info" id="content_textarea_info"></textarea>
<p class="colse_tip"></p></td>
</tr>
<tr>
<td><p><i>*</i><strong>选择行业</strong></p>
<p class="colse_tip" id="type_p_info" style="display:hidden;">请选择行业！</p></td>
</tr>
<tr>
<td>
<p class="next_select select_width select_bg" id="next_select0">
<span id="type_span_info">请选择</span>
</p>
<p class="select_box select_top select_width" data-id="" id="select_box0">
<ul>
<li class="curr" data-id="2">化工</li>
<li data-id="3">装备制造</li>
<li data-id="4">生物医药</li>
<li data-id="5">电子信息</li>
<li data-id="6">其他</li>
</ul>
</p>
</td>
</tr>
<tr>
<td>
<input type="button" class="isue_inp_btn" value="添加图片"/>
<input type="text" id="issue_input_text" class="issue_text" />
<input type="file" id="file" name="file" class="issue_file" onchange="javaScript:validate_img(this)" />
</td>
</tr>
</tbody>
</table>
</form>
</p>
<p class="financial_pro_icon">
<p class="financial_pro_icon_l issue_btn1">
<a href="javaScript:save();">发布</a>
</p>
<p class="financial_pro_icon_r issue_btn1">
<a href="${ctx}/info/gotoInfo?index=2">取消</a>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
<!--页面主体 end-->
</p>
</body>
</html>上面的代码是我在项目实际开发的过程中所用的代码，具体的CSS文件与JS文件我已经删掉了，但是不会影响具体的操作，大家使用的时候只需要把其中的class文件删掉了就可以了。好了，我们在说一说上面的代码。首先为大家解释一下ctx的作用，在我们项目开发的过程中，我们要求必须使用绝对路径，所有{ctx}是我们封装好的一个东西，就是我们的服务器地址+端口号+项目名称。当我们使用的时候，只需要引用一下文件，就是上面直接使用的<%@ include file=”../commons/taglibs.jsp”%>，当我们用的时候直接使用${ctx}就可以，大家在使用的时候就直接使用自己的本机地址端口号与项目名称就可以。后面的/resources/new_js/jquery.js就是我们要使用的jqery.js文件的存放地址。
其实在上面的Ajax的操作中，我相当于做了两次的Ajax的提价，但是在第一次提交的时候，后台给我们返回一个参数，就是我们的文件存放路径与文件名称，在第二次提交的时候，我们将这些参数与其他参数同时上传到后台，并将这些参数保存到数据库中，以便我们使用。
* 4 后台代码：
//文件上传
@RequestMapping(value = "/doUpload", method = RequestMethod.POST, produces = "text/html; charset=UTF-8")
@ResponseBody
public String doUpload(HttpServletRequest request, HttpServletResponse response) throws IOException {
List<String> fileNames = null;
if (request instanceof MultipartHttpServletRequest) {
// process the uploaded file
logger.info("=====进入文件类型选择=====");
fileNames = uploadAttachment(request, "file");
}
String url = "";
if (fileNames.size() > 0) {
for (int i = 0; i < fileNames.size(); i++) {
url = url + fileNames.get(i);
if(i < fileNames.size() - 1){
url = url + ",";
}
}
}
return url;
}
//文件上传的工具类
public List<String> uploadAttachment(HttpServletRequest request, String type) throws IOException {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
List<MultipartFile> files = multipartRequest.getFiles(type);
logger.info("数据长度========>>>>>>>>>>" + files.size());
Calendar now = Calendar.getInstance();
int year = now.get(Calendar.YEAR);
int month = now.get(Calendar.MONTH) + 1;
String realPath = PropertiesUtil.getProperty("realPath");
System.err.println("realpath=====>>>>>" + realPath);
//String savePath = request.getSession().getServletContext().getRealPath("/") + "p_image\\" + type + "\\" + year+ "\\" + month + "\\";
String savePath = "government"+ File.separator + "image"+ File.separator + year+ File.separator + month + File.separator;
logger.info("保存路径=====>" + savePath);
List<String> fileNames = new ArrayList<String>();
for (MultipartFile multipartFile : files) {
logger.info("--" + multipartFile.getOriginalFilename());
String fileName = multipartFile.getOriginalFilename();
String prefix = fileName.substring(fileName.lastIndexOf(".") + 1);
String custName = "" + System.currentTimeMillis() + "." + prefix;
if (UsedUtil.isNotNull(fileName)) {
File targetFile = new File(realPath+savePath, custName);
// fileName = year+"-"+month+"-"+fileName;
if (!targetFile.exists()) {
targetFile.mkdirs();
multipartFile.transferTo(targetFile);
}
try {
} catch (Exception e) {
e.printStackTrace();
}
fileNames.add(savePath + custName);
}
}
return fileNames;
}
//添加咨询
@RequestMapping(value = "/addInfo", method = RequestMethod.POST)
@ResponseBody
public Integer addInfo(HttpServletRequest request, HttpServletResponse response,
@RequestParam String fileUrl) {
InfoBean bean = new InfoBean();
if(UsedUtil.isNotNull(fileUrl)){
bean.setImagePath(fileUrl);
}
Map<String, Object> paramMap = ControllerUtil.request2Map(request);
bean.setTitle((String) paramMap.get("title"));
bean.setSummary((String) paramMap.get("summary"));
bean.setContent((String) paramMap.get("content"));
bean.setTypeId((String)paramMap.get("typeId"));
return infoService.insInfo(bean);
}在上面的代码中我们可以看到，在文件第一次上传的过程中，我们首先进入到doUpload中，然后使用uploadAttachment工具类，并将文件上传到服务器中，在上传的过程中，我首先做了一个文件唯一名称的操作，就是获取当前时间的毫秒数，虽然不能绝对保证，但是到并发量小的时候可以保证不会造成文件名称重复。然后，我将文件上传的路径的上传地址写到了.properties中，这样的好处是当我们想更换文件上传的路径时，我们就可以直接修改.properties文件，而读取.properties文件的具体方式在我的另一篇文章中讲到。最后，我们在开发的过程中，文件保存一般是保存到文件服务器中，而文件服务器一般是在Linux中，而在不同的服务器中，路径是使用斜杠还是反斜杠是不同的，所有我在这里面使用了File.separator来代替，File.separator在不同的系统中可以自动生成斜杠获反斜杠。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
ajax가 json을 전송할 때 잘못된 코드가 나타나는 이유는 무엇입니까?
위 내용은 Ajax를 사용하여 파일 및 매개변수를 업로드하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7445
15
1374
52
76
11
39
19
14
6
QQ Music에 가사를 업로드하는 방법
Feb 23, 2024 pm 11:45 PM
디지털 시대가 도래하면서 음악 플랫폼은 사람들이 음악을 얻는 주요 수단 중 하나가 되었습니다. 하지만 가끔 노래를 듣다 보면 가사가 없다는 것을 발견하게 되는데, 이는 매우 혼란스럽습니다. 많은 사람들은 노래를 들을 때 가사가 표시되어 노래의 내용과 감정을 더 잘 이해할 수 있기를 바랍니다. 중국 최대 음악 플랫폼 중 하나인 QQ 뮤직은 사용자에게 가사 업로드 기능을 제공하여 사용자가 음악을 더 잘 즐기고 노래의 의미를 느낄 수 있도록 합니다. QQ뮤직에 가사를 업로드하는 방법은 다음과 같습니다. 첫 번째
Kugou에 자신의 음악을 업로드하는 간단한 단계
Mar 25, 2024 pm 10:56 PM
1. Kugou Music을 열고 프로필 사진을 클릭하세요. 2. 오른쪽 상단의 설정 아이콘을 클릭하세요. 3. [음악작품 업로드]를 클릭하세요. 4. [작품 업로드]를 클릭하세요. 5. 노래를 선택하고 [다음]을 클릭하세요. 6. 마지막으로 [업로드]를 클릭하세요.
jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법
Feb 20, 2024 am 10:07 AM
제목: jQuery AJAX 요청의 403 오류를 해결하는 방법 및 코드 예제 403 오류는 서버가 리소스에 대한 액세스를 금지하는 요청을 의미합니다. 이 오류는 일반적으로 요청에 권한이 없거나 서버에서 거부되기 때문에 발생합니다. jQueryAJAX 요청을 할 때 가끔 이런 상황이 발생합니다. 이 기사에서는 이 문제를 해결하는 방법을 소개하고 코드 예제를 제공합니다. 해결 방법: 권한 확인: 먼저 요청한 URL 주소가 올바른지 확인하고 리소스에 액세스할 수 있는 충분한 권한이 있는지 확인하십시오.
jQuery AJAX 요청 403 오류를 해결하는 방법
Feb 19, 2024 pm 05:55 PM
jQuery는 클라이언트 측 개발을 단순화하는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. AJAX는 전체 웹 페이지를 다시 로드하지 않고 비동기 요청을 보내고 서버와 상호 작용하는 기술입니다. 그러나 jQuery를 사용하여 AJAX 요청을 할 때 가끔 403 오류가 발생합니다. 403 오류는 일반적으로 보안 정책이나 권한 문제로 인해 서버 거부 액세스 오류입니다. 이 기사에서는 403 오류가 발생한 jQueryAJAX 요청을 해결하는 방법에 대해 설명합니다.
i9-12900H 매개변수 평가 목록
Feb 23, 2024 am 09:25 AM
i9-12900H는 14코어 프로세서로, 사용된 아키텍처와 기술이 모두 새롭고, 전반적인 작업이 매우 뛰어나며, 특히 포괄적이며 사용자에게 뛰어난 경험을 제공할 수 있습니다. . i9-12900H 매개변수 평가 검토: 1. i9-12900H는 14코어 프로세서로, q1 아키텍처와 24576kb 프로세스 기술을 채택하고 20스레드로 업그레이드되었습니다. 2. 최대 CPU 주파수는 1.80!5.00ghz이며 주로 작업량에 따라 다릅니다. 3. 가격에 비해 가격 대비 성능이 매우 적합하며 정상적인 사용이 필요한 일부 파트너에게 매우 적합합니다. i9-12900H 매개변수 평가 및 성능 벤치마크
C++ 함수 매개변수 유형 안전성 확인
Apr 19, 2024 pm 12:00 PM
C++ 매개변수 유형 안전성 검사는 함수가 컴파일 시간 검사, 런타임 검사 및 정적 어설션을 통해 예상된 유형의 값만 허용하도록 보장하여 예기치 않은 동작 및 프로그램 충돌을 방지합니다. 컴파일 시간 유형 검사: 컴파일러가 유형 호환성을 검사합니다. 런타임 유형 검사: 동적_캐스트를 사용하여 유형 호환성을 확인하고 일치하는 항목이 없으면 예외를 발생시킵니다. 정적 어설션: 컴파일 타임에 유형 조건을 어설션합니다.
Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까?
Mar 09, 2024 pm 05:36 PM
Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.
jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까?
Feb 23, 2024 pm 04:27 PM
jQueryAJAX 오류 403 문제를 해결하는 방법은 무엇입니까? 웹 애플리케이션을 개발할 때 jQuery는 종종 비동기 요청을 보내는 데 사용됩니다. 그러나 때때로 jQueryAJAX를 사용할 때 서버에서 액세스가 금지되었음을 나타내는 오류 코드 403이 발생할 수 있습니다. 이는 일반적으로 서버 측 보안 설정으로 인해 발생하지만 문제를 해결하는 방법이 있습니다. 이 기사에서는 jQueryAJAX 오류 403 문제를 해결하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 만들다
