1、如何设计前端实现访问手机相册上传照片?
解决方法为:
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="image/*" >
第一个input 可以直接调用手机的相机,capture表示的是系统所捕获的默认设备,camera:照相机;camcorder:摄像机;microphone:录音;
第二个input 调用的是相册或者相机,这个因浏览器不同而表现不同。
2、如何将相片传入后台以及数据库
第一种方案是FormData技术:
// 实例化一个空对象
var data = new FormData();
//获取file文件
var file=document.getElementById(yourInputId).files[0];
//将文件加入到data中,一般FormData对象中添加数据使用append()方法
data.append(file)
// 创建一个HTTP请求
var request = new XMLHttpRequest();
// 然后使用open方法,选择传送的method和后台的URL
request.open("POST|GET", "URL");
// 最后,向后台发送我们的数据
request.send(data)
第二种方案就是之前提到过的jQuery:
// 获取要传输的文件------假设只有一个文件
var file = document.getElementById(yourInputId).files[0];
// ajax传输
$.ajax({
url: URL,
type: "POST",
async: false,
cache: false,
processData: false,// 告诉jQuery不要去处理发送的数据
contentType: false,// 告诉jQuery不要去设置Content-Type请求头
data: file,
success: function(data){
alert(data);
},
error: function(err) {
alert(err);
}
});
3、使用struts2与ajax结合进行数据传输
首先需要了解post与ajax的区别
1、$.post:这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
2、$.ajax:当传递给服务器的数据复杂类型数据的时候,$.post方法就无效了。
其次需要导入jar包:除了struts2的基本jar包外,再加struts2-json-plugin-2.3.15.1.jar和struts2-junit-plugin-2.3.15.1.jar,然后配置拦截器:
<interceptors>
<interceptor-stack name="ajaxStack">
<interceptor-ref name="defaultStack"></interceptor-ref>
<interceptor-ref name="json"></interceptor-ref>
</interceptor-stack>
</interceptors>
<default-interceptor-ref name="ajaxStack"></default-interceptor-ref>
测试代码如下:
1、action接收前台数据
public class TestMoreJson extends ActionSupport implements Serializable {
private String id;
private String username;
private Integer[] arrayInt;
private List<Integer> arrayList;
private List<Teacher> teacherList;
public String execute(){
try {
int i = 1/0;
} catch (Exception e) {
ServletActionContext.getResponse().setStatus(500);//手动设置服务器返回的状态码 e.printStackTrace();
}
return SUCCESS;
}
//省略get和set方法
}
2、struts2的配置文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<!-- 使用简单主题 -->
<constant name="struts.ui.theme" value="simple"/>
<!-- 自动加载 -->
<constant name="struts.devMode" value="true" />
<package name="testAjax" extends="json-default">
<interceptors>
<interceptor-stack name="ajaxStack">
<interceptor-ref name="defaultStack"></interceptor-ref>
<interceptor-ref name="json"></interceptor-ref>
</interceptor-stack>
</interceptors>
<default-interceptor-ref name="ajaxStack"/>
<action name="testMoreJson" class="com.xxc.action2.TestMoreJson">
<result type="json"></result>
</action>
</package>
</struts>
详细介绍:https://blog.csdn.net/world_java/article/details/12850245
https://blog.csdn.net/u013258447/article/details/58597128