一图片
二，代码
<body>
???<div class="fft-wrapper">
???????<form id="submitForm" action="" method="post">
???????
???????<div class="form-wrapper">
??????????????
???????????<ul class="upload-wrapper">
???????????????<li class="title">上传门头照片</li>
???????????????<div class="upload-img">
???????????????????<img id="yushowOuter" class="img" ?src="${rc.contextPath}/js/css/images/Img_storefront@2x.png" />
???????????????????<div class="tip fr">
????????????????????<input ?onclick="uploadBtnOuter();" value="上传图片">
???????????????????????<input type="file" name="uploadOuter" style="display:none;" onchange="previewImgOuter(this);" id="uploadOuter" accept="image/*"/>
???????????????????????
???????????????????</div>
???????????????</div>
???????????</ul>
???????????
???????</div>
?????
???????</form>
???</div>
<script>
???var lib = {flexible:{rem:150,page:750}};
</script>
???<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript">
function uploadBtnOuter(){
???$("#uploadOuter").click();
}
//图片预览 ???previewImg(this);
function previewImgOuter(imgFile){
???var extension = imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);//扩展名
???extension = extension.toLowerCase();//把文件扩展名转换为小写
???if ((extension!=‘.jpg‘)&&(extension!=‘.gif‘)&&(extension!=‘.jpeg‘)&&(extension!=‘.png‘)&&(extension!=‘.bmp‘)){
???????layer.msg("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
???????$(".btn-uploading").focus();//将焦点定位在文件上传的按钮上，可以直接按确定键再次触发
???}else{
???????var path;//预览地址
???????if(document.all){//IE
???????????imgFile.select();
???????????????path = document.selection.createRange().text;
???????}else{//火狐，谷歌
???????????path = window.URL.createObjectURL(imgFile.files[0]);
???????}
???????$("#yushowOuter").attr("src",path);//设置预览地址
???????uploadImgOuter(imgFile);
???}
}
function uploadImgOuter(imgFile){
var file = imgFile.files[0];//文件对象
???var name = file.name;//图片名
var url = ‘${rc.contextPath}/wxFfanApply.htm?method=UploadFile&state=Outer‘;
$.ajaxFileUpload({
??????url: url,
??????secureuri:false,
??type: ‘POST‘,
??fileElementId:"uploadOuter", ???
??dataType: ‘json‘,
??success: function (data, status) ?//服务器成功响应处理函数
??????????????????{ ?
??var index = data.indexOf(‘{‘);
??????????????data= data.substring(index, data.length);
??????????????var obj = eval(‘(‘ + data + ‘)‘);
????????????????????????if ("000" == obj.code) {
????????????????????????$("#fssIdOuter").val(obj.fssId);
????????????????????????$("#originalFilenameOuter").val(obj.originalFilename);
????????????????????????$("#imageTypeOuter").val(obj.imageType);
?????????????????????????????/* ?alert(obj.fssId);
??????????????????????????????alert(obj.originalFilename);
??????????????????????????????alert(obj.imageType); ?*/
??????????????????????????????alert("上传成功");
??????????????????????????} else {
????????????????????????????alert("保存有问题，请重试");
??????????????????????????}
??????????????????????
??????????????????},
??????????????????error: function (data, status, e)//服务器响应失败处理函数
??????????????????{
??????????????????????alert(e);
??????????????????}
??});
}
</script>
</body>
</html>
点击照片上传照片二
原文地址：http://www.cnblogs.com/qingruihappy/p/7788658.html