Question

我使用bootstrap创建了一个用于上传专辑封面以创建专辑的模式。到目前为止，我使用基本的html方法上传文件，直到我遇到拖放。我找到了流行的dropzone插件，并认为我应该尝试一下。我对jquery / ajax并不熟悉，并且悲惨地失败了。我有以下要求：

只有在单击“提交”按钮（输入类型为“按钮”）
只能删除一个文件
模态
删除图片的选项
进度条

我一直在寻找这么多小时的答案，但我找不到合适的解决方案。有谁能帮我解决这个难题？我附上了下面的模态代码。我使用PHP作为我的服务器端脚本语言。感谢

<div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title"><i class="fa fa-folder"> </i> Create Album</h4>
                </div>
                <div class="modal-body">

                  <form name="theForm" id="frmalbum" method="POST" enctype="multipart/form-data" class="form-horizontal" role="form">
                    <div class="form-group">
                       <h4><label class="control-label col-sm-2" for="text">Album name:</label></h4>
                      <div class="col-sm-10">
                        <h4><b><input type="text" name="aname" class="form-control" id="aname" placeholder="Enter album name"  /></b></h4>
                      </div>
                    </div>

                <div class="form-group">
                      <h4><label class="control-label col-sm-2" for="text">Album type:</label></h4>
                      <div class="col-sm-10">
                        <h4><b><select name="atype" id="atype">
                        <option value="English">English</option>
                        <option value="Hindi">Hindi</option>
                        </select></b></h4>
                      </div>
                    </div>

                <div class="form-group">
                      <h4><label class="control-label col-sm-2" for="text">Album art:</label></h4>
                      <div class="col-sm-10">
                        <h4><b><input type="file" name="picToUpload" class="form-control" id="picToUpload" placeholder="Enter album art" /></b></h4>
                      </div>
                    </div>

                    <div class="form-group">        
                      <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-default" onClick="cnfrm()"><h4>Create</h4></button>
                      </div>
                    </div>
                  </form>

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal" ><h4>Close</h4></button>
                </div>
         </div>

    </div>
 </div>

提交表单的代码：

<script type="text/javascript">
function cnfrm()
{
var aname=document.getElementById('aname').value;
var x=document.getElementById('picToUpload').value;
    if(x=="")
    {
        alert("No album art selected");
    }
    else
    {
        var c=confirm("Do you want to add the album?");
        if(c==true)
        {
            var f = document.getElementById("frmalbum");
            f.action="createalbum.php";
            f.submit();
        }
    }
}
</script>

结合bootstrap模态与拖放

0 个答案: