Uncaught TypeError: (o.contentType || "") .indexOf is not a function

I modified the code because the images were not loaded and this is the definitive code.

Thanks a lot to @OscarGarcia without it I would not have gotten it.

$(document).ready(function() {  
$("body").on("submit", "form", function(event) {
            event.stopPropagation();
         event.preventDefault();  

         var type = "POST";  
           var url = $(this, "form").prop("action");  
           var cache = false;
            var contentType = 'application/x-www-form-urlencoded';
            var processData = true;     

         if(event.target.files) {           
            var data = new FormData(this);
            contentType = false;
                processData = false;
            } 
            else {
                var data = $(this).serialize();
            }

            $.ajax({
            url: url,
              data: data,
              type: type,
              cache: cache,
              contentType: contentType,
              processData: processData
            })
            .done(function(data) {
                $(".section").html(data);
            }); 
        });
 });

Possibly the error is because for the contentType: contentType you are using a booleano and expect a string , hence the indexOf .

Try removing that property so that it makes use of the default value and so should no longer fail.

Also, it is not good practice to name the variables of the values with the same name as the property, this can give you a lot of headaches (or at least quotation the names of the properties).

You are accidentally misusing contentType: true . You should skip that line and leave:

$.ajax({
  url: url,
  data: data,
  type: type,
  cache: cache,
  processData: processData
}).done(function(data) {
  $(".section").html(data);
});

As stated in the jQuery.ajax() documentation, the value of contentType can be Boolean o String , but what is not clear is that if Boolean can only be worth false :

  

When sending data to the server, use this content type. Default is   "application / x-www-form-urlencoded; charset = UTF-8", which is fine for   most cases. If you explicitly pass in to content-type to $ .ajax (), then   it is always sent to the server (even if no data is sent). As of   jQuery 1.6 you can pass false to tell jQuery to not set any content   type header.

In Spanish:

  

When data is sent to the server, use this type of content. By   default is "application / x-www-form-urlencoded; charset = UTF-8", which is   well in most cases. If you explicitly specify a    content-type to $.ajax() , then it is always sent to the server   (even when data is not sent). From jQuery 1.6 you can   pass false to not send any header content type .

But they have forgotten to detail that if you pass a true it causes an error in this line :

( s.contentType || "" ).indexOf( "application/x-www-form-urlencoded" ) === 0

Since they have not taken into account that in the case that s.contentType is worth true will not use "" as input to the indexOf next, if not the own value true that does not have method indexOf for being a primitive data type.

By making some changes to your code, I've been able to start your application:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
  $(document).ready(function() {
    $("body").on("submit", "form", function(event) {
        event.stopPropagation();
        event.preventDefault();

        var type = "post";
        var url = $(this).prop("action");
        /* Cuando mandamos sólo texto (sin archivos)
             configuramos estos valores */
        var contentType = 'application/x-www-form-urlencoded';
        var processData = true;

        /* Para que PHP reciba todos los archivos hay que definir
             el <input> con corchetes, de modo que aquí tenemos que
             indicarlo igual */
        if (this['files[]'].files.length) {
            var data = new FormData(this);
            /* En este caso sí que hay que cambiar estos parámetros,
                 en particular contentType=false provoca una cabecera HTTP
                 'multipart/form-data; boundary=----...' */
            contentType = false;
            processData = false;
        } else {
            var data = $(this).serialize();
        }
        $.ajax({
            url: url,
            data: data,
            type: type,
            contentType: contentType,
            processData: processData
        }).done(function(data) {
            $(".section").html(data);
        });
    });
});
</script>
<form id="form" action="formulario.php" method="post">
    <input type="text" placeholder="Pon algo..." name="campo" /><br />
    <input type="file" name="files[]" multiple /><br />
    <input type="submit" value="Enviar formulario" />
</form>
<pre class="section"></pre>