html 提交表单，图片和文字一起提交，图片存入服务器，图片地址

发布时间：2020-12-24 17:37:39 所属栏目：资源来源：网络整理

导读：html pre class="has" !DOCTYPE html head meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" / meta charset="UTF-8"gt; titleTitle/title script src="https://ajax.aspnetcdn.

副标题[/!--empirenews.page--]

html

<pre class="has">
<!DOCTYPE html>



<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />
    <meta charset="UTF-8"&gt;
    <title>Title</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"&gt;</script>
    <script src="js/JQF.js"&gt;</script>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <style>
        p{
        margin: 20px 0 0 20px;}
    </style>
</head>

<body>
    <form id="form1" method="post" enctype="multipart/form-data"&gt;
        <p>新建经销商</p>
        <div class="form-group"&gt;
            <label class="sr-only" for="name"&gt;账号</label>
            <input type="text" class="form-control" name="chat_name" placeholder="请输入聊天室名称"&gt;
        </div>
        <div class="form-group"&gt;
            <label class="sr-only" for="inputfile"&gt;文件输入</label>
            <input type="file" name="file"&gt;
        </div>
        <button id="ok" class="btn btn-default"&gt;提交</button>
    </form>

    <!-- 其实我们可以把iframe标签隐藏掉 -->
    <script type="text/javascript"&gt;
        $("#ok").click(function() {
            console.log('123')
            $("#form1").ajaxSubmit({
                url: "http://localhost/M-IM/h5_upImg.php",type: "post",dataType: 'json',success: function(data) {
alert("成功！");

},error: function(data) {

}

});

});

后端php代码

<pre class="has">
<?php header("Content-Type:text/html;charset=utf8"); header("Access-Control-Allow-Origin: *"); //解决跨域 header('Access-Control-Allow-Methods:POST');// 响应类型 $link=mysql_connect("localhost","root","root"); mysql_select_db("merchant",$link); //选择数据库 mysql_query("SET NAMES utf8");//解决中文乱码问题


if ($_FILES["file"]["error"] > 0)  
  {  
  echo "错误: " . $_FILES["file"]["error"] . "<br />";  
  }  
else  
  {  
$chat_name = $_POST['chat_name'];
$chat_img='http://localhost/M-IM/chat_img/'.$_FILES['file']['name'];  

//插入数据到数据库 
$strsql = "insert into chat_room (chat_name,chat_img) values('$chat_name','$chat_img')";

        $result = @mysql_query($strsql);
  }  

      move_uploaded_file($_FILES["file"]["tmp_name"],"chat_img/" . $_FILES["file"]["name"]);  
      echo "chat_img/" . $_FILES["file"]["name"];

?>

JQF文件

<pre class="has">
/*!



jQuery Form Plugin
version: 3.51.0-2014.06.20
Requires jQuery v1.5 or later
Copyright (c) 2014 M. Alsup
Examples and documentation at: http://malsup.com/jquery/form/
Project repository: https://github.com/malsup/form
Dual licensed under the MIT and GPL licenses.
https://github.com/malsup/form#copyright-and-license

/

/global ActiveXObject */

// AMD support

(function (factory) {

"use strict";

if (typeof define === 'function' && define.amd) {

// using AMD; register as anon module

define(['jquery'],factory);

} else {

// no AMD; invoke directly

factory( (typeof(jQuery) != 'undefined') ? jQuery : window.Zepto );

}

}
(function($) {

"use strict";
/*

Usage Note:

Do not use both ajaxSubmit and ajaxForm on the same form.  These
functions are mutually exclusive.  Use ajaxSubmit if you want
to bind your own submit handler to the form.  For example,$(document).ready(function() {
    $('#myForm').on('submit',function(e) {
        e.preventDefault(); // <-- important
        $(this).ajaxSubmit({
            target: '#output'
        });
    });
});

Use ajaxForm when you want the plugin to manage all the event binding
for you.  For example,$(document).ready(function() {
    $('#myForm').ajaxForm({
        target: '#output'
    });
});

You can also use ajaxForm with delegation (requires jQuery v1.7+),so the
form does not have to exist when you invoke ajaxForm:

$('#myForm').ajaxForm({
    delegation: true,target: '#output'
});

When using ajaxForm,the ajaxSubmit function will be invoked for you
at the appropriate time.
*/
/**

Feature detection

*/

var feature = {};

feature.fileapi = $("").get(0).files !== undefined;

feature.formdata = window.FormData !== undefined;

var hasProp = !!$.fn.prop;
// attr2 uses prop when it can but checks the return type for

// an expected string.  this accounts for the case where a form

// contains inputs with names like "action" or "method"; in those

// cases "prop" returns the element

$.fn.attr2 = function() {

if ( ! hasProp ) {

return this.attr.apply(this,arguments);

}

var val = this.prop.apply(this,arguments);

if ( ( val && val.jquery ) || typeof val === 'string' ) {

return val;

}

return this.attr.apply(this,arguments);

};
/**


ajaxSubmit() provides a mechanism for immediately submitting


an HTML form using AJAX.

/

$.fn.ajaxSubmit = function(options) {

/jshint scripturl:true */

                                                （编辑：济源站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/17

尾页