Ajax上传图片js插件 - 管理猿 2019 年 01 月 14 日 |访问: 302 次

ajax上传图片的插件的常见用法是利用输入框ajax把图片上传到服务器,然后输出图片地址,再显示出来,可以预览。
表单提交的时候直接提交图片的保存地址。(需要节省空间可以上传处理的时候统一重命名覆盖)
通过百度检索到的js文件使用直接报错,所以留存一个存档使用。附一个常见的使用方案。

<div class="form-group">
<label for="exampleInputPassword1">Select file【size600X300】*</label>
<input name="advimg" id="advimg" type="file" class="form-control" onchange="uploadImage()"/>
<input type="hidden" name="img" id="img" value="${entity.img }"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Carousel map(Disable the browser ad blocking plugin if it doesn't appear after uploading the image.)*</label>
<div style="width:100%; height:80px;">
<c:if test="${entity.img == null }">
<img src="/pic/3.jpg" id="photo" style="max-width: 100%; max-height: 80px;"/>
</c:if>
<c:if test="${entity.img != null }">
<img src="${entity.img }" id="photo" style="max-width: 100%; max-height: 80px;"/>
</c:if>
</div>
</div>  

<script type="text/javascript">
function uploadImage(){
// 检查图片格式
var f=document.getElementById("advimg").value;
if(!/\.(gif|jpg|jpeg|png|JPG|PNG)$/.test(f))
{
swal("Operation prompt","图片类型必须是.jpeg,jpg,png","error");
return false;
}
// 利用ajaxFileUpload js 插件上传图片
      var uploadUrl = encodeURI(encodeURI("/upload.action"));
              $.ajaxFileUpload({
                  url:uploadUrl,
                  secureuri:false,  
                  fileElementId:'advimg',  
                  dataType : 'json', //返回值类型 一般设置为json  
                  success:function (data, status) {
                      if(data.ret==1){
                          swal("Tips", data.msg,"error");
                      }
                      if(data.ret==0){
                          document.getElementById("photo").src = data.tempPath;
                          document.getElementById("img").value = data.tempPath; 
                      }
                  },
                  error:function (data, status, e) {
                      swal("Tips", "发生错误","error");
                  }  
              });
              return false; 
}
</script>

java的语言环境,有个判断,后台up.action就省掉了,是判断图片尺寸是否符合要求,并返回成功或失败的提示的
QQ截图20190114100323.png

JS下载:ajaxfileupload
ajaxfileupload.rar

标签:none

添加新评论