Question

我有一个上传文件的简单表单：

<form method="post" action="">
  <input id="holder" type="file" style="padding: 5px; width:100%; height:100px; border: 5px dashed #ccc">
</form>

http://jsfiddle.net/e98b2w7s/

但是现在我需要一种在虚线区域内的背景中添加此文本的方法：

"or Drag and Drop your file here"

有办法吗？

Answer 1

您最好将样式设置为表单，在这种情况下，您可以给form itself the background image以获得更简洁的解决方案：

编辑：删除了背景图片，以显示文字，而不是采用更简洁的方法。

form {
  padding: 5px;
  width: 100%;
  height: 100px;
  border: 5px dashed #ccc;
}

form h1 {
  text-align: center;
  color: #ccc;
}

<form method="post" action="">
  <input id="holder" type="file">
  <h1>Drag &amp; Drop Files Here</h1>
</form>

您不需要使用背景图片，但是，您可以创建一个h1并显示“ Drag＆Drop Here”，然后使用SVG或FontAwesome添加云和/或箭头图标

Answer 2

正如您在这里提到的一个问题，我正在发布我的答案

public void CreateTextButtonClick(GameObject panel)
{
    string text = "hello..";
    Debug.Log("Hey starting of this..");

    //Create Canvas Text and make it child of the Canvas
    GameObject txtObj = new GameObject("myText", typeof(RectTransform));
    txtObj.transform.SetParent(panel.transform, false);
    HorizontalLayoutGroup layoutgroup = txtObj.AddComponent<HorizontalLayoutGroup>();
    layoutgroup.childAlignment = TextAnchor.MiddleCenter;
    layoutgroup.childControlWidth = false;

    //image
    GameObject back = new GameObject("image");
    back.transform.SetParent(txtObj.transform, false);
    back.AddComponent<LayoutElement>().ignoreLayout = true;
    Image i = back.AddComponent<Image>();
    RectTransform imageRectTransform = back.GetComponent<RectTransform>();
    imageRectTransform.anchorMin = Vector2.zero;
    imageRectTransform.anchorMax = Vector2.one;
    imageRectTransform.sizeDelta = Vector2.zero;

    //text
    GameObject pan = new GameObject("text");
    pan.transform.SetParent(txtObj.transform, false);

    //Attach Text,RectTransform, an put Font to it
    Text txt = pan.AddComponent<Text>();
    txt.text = text;
    Font arialFont = Resources.GetBuiltinResource<Font>("Arial.ttf");
    txt.font = arialFont;
    txt.lineSpacing = 1;
    txt.color = Color.blue;

    Debug.Log("Hey its done..");
}

@throws \Exception

$(function () {
    var dropZoneId = "drop-zone";
    var buttonId = "clickHere";
    var mouseOverClass = "mouse-over";

    var dropZone = $("#" + dropZoneId);
    var ooleft = dropZone.offset().left;
    var ooright = dropZone.outerWidth() + ooleft;
    var ootop = dropZone.offset().top;
    var oobottom = dropZone.outerHeight() + ootop;
    var inputFile = dropZone.find("input");
    document.getElementById(dropZoneId).addEventListener("dragover", function (e) {
        e.preventDefault();
        e.stopPropagation();
        dropZone.addClass(mouseOverClass);
        var x = e.pageX;
        var y = e.pageY;

        if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
            inputFile.offset({ top: y - 15, left: x - 100 });
        } else {
            inputFile.offset({ top: -400, left: -400 });
        }

    }, true);

    if (buttonId != "") {
        var clickZone = $("#" + buttonId);

        var oleft = clickZone.offset().left;
        var oright = clickZone.outerWidth() + oleft;
        var otop = clickZone.offset().top;
        var obottom = clickZone.outerHeight() + otop;

        $("#" + buttonId).mousemove(function (e) {
            var x = e.pageX;
            var y = e.pageY;
            if (!(x < oleft || x > oright || y < otop || y > obottom)) {
                inputFile.offset({ top: y - 15, left: x - 160 });
            } else {
                inputFile.offset({ top: -400, left: -400 });
            }
        });
    }

    document.getElementById(dropZoneId).addEventListener("drop", function (e) {
        $("#" + dropZoneId).removeClass(mouseOverClass);
    }, true);

})

Answer 3

请尝试以下解决方案

<form action="youractionfile.php" method="POST">
 <input type="file" multiple>
 <p>Drag your files here or click in this area.</p>
 <button type="submit">Upload</button>
</form>

CSS

<style type="text/css">
body{
  background: rgba(0,0,0,0.9);
}
form{
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -100px;
 margin-left: -250px;
 width: 500px;
 height: 200px;
 border: 4px dashed #fff; 
}
form p{
 width: 100%;
 height: 100%;
 text-align: center;
 line-height: 170px;
 color: #ffffff;
 font-family: Arial;
}
form input{
 position: absolute;
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 outline: none;
 opacity: 0;
}
form button{
 margin: 0;
 color: #fff;
 background: #16a085;
 border: none;
 width: 508px;
 height: 35px;
 margin-top: -20px;
 margin-left: -4px;
 border-radius: 4px;
 border-bottom: 4px solid #117A60;
 transition: all .2s ease;
 outline: none;
}
form button:hover{
background: #149174;
color: #0C5645;
}
form button:active{
 border:0;
}
</style>

在JavaScript代码下方

$(document).ready(function(){
   $('form input').change(function () {
   $('form p').text(this.files.length + " file(s) selected");
 });
});

Answer 4

HTML：

<input id="holder" type="file" placeholder="or Drag and Drop your file here" />
 <label for="holder"> or Drag and Drop your file here </label>

Css：

 [type=file] {
 position: absolute;
 filter: alpha(opacity=0);
 opacity: 0;
}
   input,
[type=file] + label {
  border: 1px solid #CCC;
  border-radius: 3px;
  text-align: left;
  padding: 10px;
  width: 150px;
  margin: 0;
  left: 0;
  position: relative;
}

Js：

 $("[type=file]").on("change", function(){
  // Name of file and placeholder
  var file = this.files[0].name;
  var dflt = $(this).attr("placeholder");
  if($(this).val()!=""){
    $(this).next().text(file);
  } else {
    $(this).next().text(dflt);
  }
});

工作示例here。希望这项工作

在输入文件的背景中添加文本

4 个答案: