功能实现的逻辑是:
2. 事件内容为
4.上传图片的功能,上传图片到服务端并返回图片路径展示在页面
1. 点击图片触发上传的事件
2. 上传图片
3. 返回图片路径展示
具体代码为:
1. 在对象上绑定点击事件
<img src="" alt="点击上传" id="faceImg" style="border: 1px solid; width: 50px; height: 50px; padding: 5px; cursor: pointer;" οnclick="toUpload();" />
2. 事件内容为
function toUpload() {
jQuery('#oldFilePath').val(getImgPath());
jQuery('#fileUpload').click();
}
其中的getImgPath为获取历史图片路径,有时可能需要删除历史图片
function getImgPath() {
return jQuery('#faceImg').attr('src').replace(extApi.getWebRoot(), '');
}
3.将上传图片的动作放在隐藏域里面,这样用于隐藏上传按钮,而且上传文件成功后也不会发生页面的跳转或刷新,这里才是真正的上传动作的发起者
<form id="formFile" method="post" enctype="multipart/form-data" target="frameFile" >
<input type="file" accept="image/*" id="fileUpload" name="fileUpload" class="input-file" οnchange="uploadFile();">
<input type="hidden" value="" id="oldFilePath" name="oldFilePath">
</form>
4.上传图片的功能,上传图片到服务端并返回图片路径展示在页面
function uploadFile() {
var form = jQuery("#formFile");
form.ajaxSubmit({
url : 'upload_img_used.action',
type : 'post',
beforeSubmit : function() {
layer.load();
},
success : fu