// 单图片上传 var uploadInst = upload.render({ elem: '#ID-upload-demo-btn', url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。 before: function(obj){ // 预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64） }); element.progress('filter-demo', '0%'); // 进度条复位 layer.msg('上传中', {icon: 16, time: 0}); }, done: function(res){ // 若上传失败 if(res.code > 0){ return layer.msg('上传失败'); } // 上传成功的一些操作 // … $('#ID-upload-demo-text').html(''); // 置空上传失败的状态 }, error: function(){ // 演示失败状态，并实现重传 var demoText = $('#ID-upload-demo-text'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function(){ uploadInst.upload(); }); }, // 进度条 progress: function(n, elem, e){ element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用 if(n == 100){ layer.msg('上传完毕', {icon: 1}); } } }); 我要将上传的图片存到本地文件夹要怎么改

要将上传的图片存到本地文件夹，您需要修改上传接口的代码。当前示例中上传接口是第三方的 http 请求演示，无法直接将文件保存到本地文件夹。您需要自己编写一个上传接口，在接口中添加保存文件的代码。具体实现需要根据您使用的后端语言和框架进行调整。同时，您需要在前端的上传代码中修改上传接口的 URL 地址为您自己的上传接口。

相关问题

<script> layui.use(['upload'], function () { var uploadlnst = layui.upload.render({ elem: '#upload1', type: 'post', method: 'post', url: '/BookShopSystem_war/img', before: function (obj) { //预读本地文件示例，不支持ie8 obj.preview(function (index, file, result) { $("#demo1").attr('src', result); }); }, done: function (res) { if (res.code > 0) { return layer.msg('上传失败'); } alert('上传成功' + res.url); document.getElementById('img_url').value = res.url; }, error: function () { //演示失败状态,重传 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败了</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function () { uploadlnst.upload(); }); } }); }); </script>

这是一个基于Layui框架的JavaScript代码，用于实现上传图片的操作。其中，使用了Layui的upload模块，通过layui.use(['upload']来加载upload模块。在模块加载完成后，使用layui.upload.render方法来初始化上传组件，其中，elem属性指定了上传按钮的id，即#upload1；type属性指定了上传文件的类型，这里为post；method属性指定了上传文件的方式，这里同样为post；url属性指定了上传文件的目标地址，这里为/BookShopSystem_war/img。在before回调函数中，通过预读本地文件的方式，将上传的图片显示在页面上。在done回调函数中，判断上传是否成功，如果成功则弹出上传成功的提示框，并将上传图片的URL保存到隐藏的input标签中；否则弹出上传失败的提示框。在error回调函数中，处理上传失败的情况，通过在页面上显示上传失败的信息，并提供重试按钮的方式，让用户可以重新上传图片。

如果用upload.render就没法用id上传多个文件吧

您是对的，使用 `upload.render` 方法时，无法使用 `id` 属性上传多个文件。如果您需要上传多个文件，可以使用 `upload.renderList` 方法或者在 `upload.render` 方法中使用 `multiple` 属性。

使用 `upload.renderList` 方法可以上传多个文件，示例代码如下：

<div id="upload-demo">
  <img src="" alt="" id="img">
  <div id="upload"></div>
</div>

<script>
  layui.use(['upload', 'element'], function(){
    var upload = layui.upload;
    
    //多文件列表示例
    var demoListView = $('#demoList')
    ,uploadListIns = upload.render({
      elem: '#testList'
      ,url: '/upload/'
      ,accept: 'file'
      ,multiple: true
      ,auto: false
      ,bindAction: '#testListAction'
      ,choose: function(obj){      
        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
        //读取本地文件
        obj.preview(function(index, file, result){
          var tr = $(['<tr id="upload-'+ index +'">'
            ,'<td>'+ file.name +'</td>'
            ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
            ,'<td>等待上传</td>'
            ,'<td>'
              ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
              ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
            ,'</td>'
          ,'</tr>'].join(''));
          
          //单个重传
          tr.find('.demo-reload').on('click', function(){
            obj.upload(index, file);
          });
          
          //删除
          tr.find('.demo-delete').on('click', function(){
            delete files[index]; //删除对应的文件
            tr.remove();
            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
          });
          
          demoListView.append(tr);
        });
      }
      ,done: function(res, index, upload){
        if(res.code == 0){ //上传成功
          var tr = demoListView.find('tr#upload-'+ index)
          ,tds = tr.children();
          tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
          tds.eq(3).html(''); //清空操作
          return delete this.files[index]; //删除文件队列已经上传成功的文件
        }
        this.error(index, upload);
      }
      ,error: function(index, upload){
        var tr = demoListView.find('tr#upload-'+ index)
        ,tds = tr.children();
        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
      }
    });
  });
</script>

另外，在 `upload.render` 方法中使用 `multiple` 属性也可以上传多个文件，示例代码如下：

<input type="file" name="file" multiple>

使用这种方式上传多个文件时，需要在后端进行相应的处理。