问题集合-解决方法4

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

3、电脑端的图片上传

https://blog.csdn.net/u010670151/article/details/51306615

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值