如何使用jquery.form.js上传图片到另一台服务器并回显

第一：引入jquery.form.js，设置form表单id="jvForm",属性——enctype="multipart/form-data"

第二：写一个上传图片的文本框，type="file" ，给这个input框加一个onchange事件，写一个img标签用于回显图片，如下：

<tr>
<td width="20%" class="pn-flabel pn-flabel-h"></td>
<td width="80%" class="pn-fcontent">
<img width="100" height="100" id="allImgUrl"/>
<input type="hidden" name="imgUrl" id="path"/>
<input type="file" οnchange="uploadPic()" name="pic"/>
</td>
</tr>

第三：使用ajaxSubmit来提交表单，URL为请求action的路径，请求数据类型是json，请求方式post，成功后的会掉函数里返回两个路径，一个是要保存到数据库的路径path,一个是回显的图片路径url.

<script type="text/javascript">
//上传图片
function uploadPic(){
//alert("33");
var options={
url:'${pageContext.request.contextPath }/uploadFile/load.do',
dataType:'json',
Type:'post',
success:function(data){
//alert(data);
$("#allImgUrl").attr("src",data.url);
$("#path").val(data.path);
}
};
$("#jvForm").ajaxSubmit(options);
}
</script>

第四：接收name为pic的文件，并处理。

新建个web项目imageWeb，项目下建个保存图片的文件夹名为upload，并导Jersey的相关jar包jsf-api.jar，jsf-impl.jar，用tomcat发布，然后去webapps下面把这个空项目拷贝到另一台端口号为8088服务器下的webapps下。

@Controller
@RequestMapping("/uploadFile")
public class UploadFileController {
//上传图片
@RequestMapping("/load.do")
public void upload(@RequestParam(required=false) MultipartFile pic,HttpServletResponse response){
//扩展名 jpg/png
String picname=FilenameUtils.getExtension(pic.getOriginalFilename());
//图片名称生成策略
DateFormat t=new SimpleDateFormat("yyyyMMddHHmmss");
String format=t.format(new Date());
//随机三位数
Random r=new Random();
for(int i=0;i<3;i++){
format+=r.nextInt(10);
}
//实例化一个Jersey
Client client=new Client();
//保存数据库
String path="upload/"+format+"."+picname;
//另一台服务器的请求路径是?
String url="http://localhost:8088/imageWeb/"+path;
//设置请求路径
WebResource resource=client.resource(url);
//发送开始  POST  GET   PUT
try {

resource.put(String.class,pic.getBytes());

} catch (UniformInterfaceException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (ClientHandlerException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//返回二个路径

JSONObject jsonObject=new JSONObject();
try {
jsonObject.put("url", url);
jsonObject.put("path", path);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

ResponseUtils.renderJson(response, jsonObject.toString());
}
}

第五：新建一个工具类，用于处理返回数据。对应第四步的返回二个路径问题。

public class ResponseUtils {
//发送内容
public static void render(HttpServletResponse response,String contentType,String text){
response.setContentType(contentType);
try {
response.getWriter().write(text);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}

//发送的是JSON
public static void renderJson(HttpServletResponse response,String text){
render(response, "application/json;charset=UTF-8", text);
}
//发送xml
public static void renderXml(HttpServletResponse response,String text){
render(response, "text/xml;charset=UTF-8", text);
}
//发送text
public static void renderText(HttpServletResponse response,String text){
render(response, "text/plain;charset=UTF-8", text);
}
}