一个图片上传的写法

html代码

1
2
3
4
5
<form class="employee-editInfo-logo clearfix" id="uploadform">
                                          <img id="employee-editlogo" onclick="onEmployeeModImgSelect()" alt="员工个人头像"  src="" width="120" height="144"  class="fl">
                                          <input type="file" id="employee-editlogo-btn" onchange="employeeModImgPreview()"  name="file" multiple="multiple" class="fl">
                                          <div class="employee-uploadpic-btn fl" onclick="employeeupload()">本地上传</div>
                                       </form>

  js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function onEmployeeModImgSelect(){
        $.fileButton("employee-editlogo-btn", "employee-editlogo");
    };
     
    function  employeeModImgPreview(){
        var filepath = $("#employee-editlogo-btn").val();
        var fileArr = filepath.split(".");
        if (fileArr[fileArr.length - 1] != "jpg"
                && fileArr[fileArr.length - 1] != "png"
                && fileArr[fileArr.length - 1] != "gif"
                && fileArr[fileArr.length - 1] != "bmp"
                && fileArr[fileArr.length - 1] != "jpeg") {
            $.addMessage("文件格式不正确,请选择jpg,jpeg,png,gif,bmp格式的文件", "error");
            $("#employee-editlogo-btn").val("");
            $("#employee-editlogo").attr("src", "./assets/images/head.png");
            return;
        } else {
            $.imgPreview("employee-editlogo-btn", "employee-editlogo");
        }
    };
     
 
    var employeeupload = function() {
             
            var formData = new FormData($("#uploadform" )[0]);
            $.ajax({
               url: 'http://10.0.28.99:8080/majordomo/upload/pictures',
               type: 'POST',
               data: formData,
               async: false,
               cache: false,
               contentType: false,
               processData: false,
               success: function (data){
                 alert(data.data.photos);
               },
               error: function (data){
                 $.addMessage("请求出错了,请重试", "error");
              }
           });
        }

  

posted @   深圳80后  阅读(293)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示