php - 根据类别从输入类型=文件切换到文本字段

Question

我想根据所选类别从输入类型=文件切换到文本字段。整个表单将使用处理上传功能的相同 php 代码。

这是我的表格:

<form action="" method="POST" enctype="multipart/form-data" class="uploadForm">
    	<div>
    		<select name="category">
    			<option value="pho" selected>Images</option>
    			<option value="vid">Video</option>
    			<option value="pap">Paper</option>
    		</select>
    		<input type="file" name="files[]" multiple id="file"/>
    		<p>Title: <input type="text" name="f-title" id="f-title" cols="40" rows="5" class="fullWidth"/>
    		</p>
    		<p>Description:</p>
    		<textarea type="text" name="f-desc" id="f-desc" cols="40" rows="5" class="fullWidth"></textarea>
    		<p>
    			<label class="radio">Portfolio</label>
    			<input type="radio" name="folio" value="TRUE" checked/> <span class="radio">Yes</span>
    			<input type="radio" name="folio" value="FALSE"/> <span class="radio">No</span>
    		</p>
    
    		<input type="submit" value="Upload" id="submit"/>
    	</div>
    </form>

如您所见，我想处理 3 种类型:图像、pdf 和视频。对于视频类型，我希望能够在表单中粘贴 YouTube 链接，该链接最终将保存在数据库中并显示在网站的图库中。但如果我只添加链接，上传的文件将为空。反之亦然:如果我添加图像，链接将为空。

在这些文档类型之间切换的最佳方式是什么？
PS:Javascript或jquery都可以!

Answer 1

(function($) {
  $(document).ready(function() {
    $('select')
      .change(function() {
        switch ($(this).val()) {
          case 'pho':
            $('#file').removeClass('hidden');
            $('#form-description').addClass('hidden');
            break;
          case 'vid':
          case 'pap':
            $('#form-description').removeClass('hidden');
            $('#file').addClass('hidden');
            break;
        }
      });
  });
})(jQuery)

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <form action="" method="POST" enctype="multipart/form-data" class="uploadForm">
    <div>
      <select name="category">
        <option value="pho" selected="">Images</option>
        <option value="vid">Video</option>
        <option value="pap">Paper</option>
      </select>
      <input type="file" name="files[]" multiple="" id="file" />
      <p>Title:
        <input type="text" name="f-title" id="f-title" cols="40" rows="5" class="fullWidth" />
      </p>
      <div id="form-description" class="hidden">
        <p>Description:</p>
        <textarea type="text" name="f-desc" id="f-desc" cols="40" rows="5" class="fullWidth"></textarea>
      </div>
      <p>
        <label class="radio">Portfolio</label>
        <input type="radio" name="folio" value="TRUE" checked="" />
        <span class="radio">Yes</span>
        <input type="radio" name="folio" value="FALSE" />
        <span class="radio">No</span>
      </p>
      <input type="submit" value="Upload" id="submit" />
    </div>
  </form>

最好的方法是根据所选类别显示适当的元素